Столкнулся с необходимостью вставить скроллинг в элемент сайта, так как javascript не владею, очень приглянулся плагин для mootools - scrollcontrol. После некоторых усилий серого вещества установил таки скроллинг, одна беда, никак не могу понять к чему прикрепляется css код скроллбара вот в этом примере http://web-grower.ru/stajling-skrollbarov.html Подсоединил отдельный css, никакой реакции.
mootools scrollcontrol
- Автор темы alexmc81
- Дата начала
- Статус
Да скроллбар есть и работает, меня не устраивает его стиль. Я пока еще думаю спрятать его совсем или изменить его стиль (хотя ни то ни другое не знаю пока как сделать :wub: )
Вот мой HTML
А вот css взятый из примера
Вот мой HTML
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--[if lt IE 7]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('#logo img, #menuleft, #contentfield');
</script>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
<script type="text/javascript" src="ScrollControl.js"></script>
<link href="scrollcontrol.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
window.addEvent('domready', function() {
new ScrollControl($('contentcontainer'), {'createControls': true});
new ScrollControl($('contentcontainer1'), {'htmlElementPrefix': 'control2_'}, $('scrolltrack1'), $('scrollknob1'), $('scrollUpBtn1'), $('scrollDownBtn1'));
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><a href="#"><img src="images/logo1_03-trans.png" border="0" class="a"/></a></div>
<div id="upmenu">
<ul>
<li><a href="about.html">О НАС</a></li>
<li><a href="#">ПРОДУКЦИЯ</a></li>
<li><a href="#">ПРОДУКТЫ НА ДОМ</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
<li><a href="#">НАШИ ПАРТНЕРЫ</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="menuleft">
<div id="scroller"></div>
</div>
<div id="contentfield">
<div style="margin: 50px auto; width: 670px;">
<div id="contentcontainer">
<h3>Lorem ipsum dolor sit amet<h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in congue nisi. Vivamus faucibus mauris a eros lacinia at convallis magna mollis. Maecenas hendrerit dictum massa, vel elementum odio sollicitudin nec. Fusce diam turpis, gravida in euismod sed, posuere sed libero. Morbi viverra ipsum auctor arcu lobortis molestie. Nunc ut lectus nibh. Aenean ullamcorper justo nec sapien pharetra sagittis. Duis id orci ut tellus dictum egestas. Nulla venenatis, urna quis pellentesque fringilla, augue sem hendrerit purus, quis semper mauris sem interdum arcu. In rhoncus eros vel odio feugiat euismod.</p>
<p>Suspendisse non odio id risus pharetra aliquam. Sed imperdiet vehicula nulla, non sollicitudin diam interdum non. Duis suscipit congue elit tempus elementum. Ut lacus risus, egestas non vestibulum viverra, venenatis nec lectus. Proin sit amet felis eros, vel ultricies tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pharetra pretium dolor, nec cursus tellus elementum vestibulum. Duis a nunc ligula. Vivamus commodo adipiscing arcu. Praesent diam eros, pretium at tincidunt vel, porta id leo. Nam sit amet risus ut nibh commodo suscipit ultrices quis dui. Quisque tincidunt, mauris eu lacinia venenatis, tortor libero sodales justo, sed vehicula metus nisl a massa. Sed ac cursus lectus. Curabitur leo orci, hendrerit eget accumsan eget, venenatis vel sem. Nam adipiscing sollicitudin arcu, sed blandit dolor molestie ut. Nunc erat mauris, adipiscing a venenatis sed, ornare sed lectus. Praesent at pharetra risus. Mauris quam est, placerat a mollis egestas, sollicitudin in odio. Vivamus egestas odio et justo malesuada porttitor.</p>
<p>Suspendisse ligula felis, tempor non sodales eu, porta nec sem. Suspendisse lorem arcu, laoreet vitae volutpat ac, feugiat vel sem. Donec nec luctus nibh. Nulla imperdiet, elit a ultricies sagittis, mi neque bibendum erat, sit amet mattis nisl massa at elit. Aliquam iaculis ullamcorper leo, molestie faucibus orci rhoncus et. Sed lectus elit, blandit et eleifend non, tincidunt ut nisl. Duis sed odio ante. Nunc ac metus nunc. Phasellus nulla neque, molestie vel tristique ac, venenatis lobortis massa. In lorem diam, tristique ac egestas a, condimentum sed erat. Integer erat velit, faucibus in ultricies scelerisque, elementum sed nisi. Aliquam adipiscing tincidunt ligula nec viverra.</p>
</div>
</div>
//Эту часть взял вот тут http://blog.aplusmedia.de/moo-scrollcontrol/ из исходного кода, у автора этой страницы все работает, у меня нет //
<div>
<img src="scroll_up.gif" alt="scroll up" id="scrollUpBtn"/>
<div id="scrolltrack">
<div id="scrollknob"></div>
</div>
<img src="scroll_down.gif" alt="scroll_down" id="scrollDownBtn"/>
</div>
</div>
<div style="clear: both; height: 20px;"></div> //
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Код:
#container #content #contentfield #contentcontainer {
height: 400px;
width: 665px;
padding-top: 0;
padding-right: 10px;
overflow: scroll;
overflow-x: hidden;
margin-top: 20px;
font-size: 15px;
}
#contentmask {
overflow: hidden;
position: relative;
height: 300px;
width: 420px;
padding-top: 0;
padding-right: 10px;
float: left;
}
#scrollcontainer {
float: left;
height: 300px;
width: 10px;
margin-left: 5px;
display: none;
}
#scrollUpBtn {
height: 10px;
width: 10px;
background-image: url(../images/scroll_up.gif);
margin-bottom: 5px;
}
#scrollDownBtn {
height: 10px;
width: 10px;
background-image: url(../images/scroll_down.gif);
margin-top: 5px;
}
#scrolltrack {
height: 270px;
width: 10px;
background-color: #e0e0e0;
}
#scrollknob {
width: 8px;
height: 25px;
border: 1px solid #e0e0e0;
background-color: #637279;
}- Статус
