Вздумалось собрать скролбар на javascript, и никак без вопросов:
1 Не работает прокручивалка в Mozilla, и возможно в Opera тоже (не пробовал). Может команды под мозилой пишутся иначе?
2 Какое событие возникает при прокрутке колеса мыши, и как отловить куда оно крутиться: вверх или вниз.
| Код |
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<script>
<!--
var scroll=0;
function scrollUp(name) {
if (e = document.getElementById(name)) {
mt = parseInt(e.style.marginTop);
if (mt < 0) e.style.marginTop = (mt + 30) + 'px';
}
}
function scrollDown(name) {
if (e = document.getElementById(name)) {
mt = parseInt(e.style.marginTop);
if (e.offsetHeight + mt >= 375) e.style.marginTop = (mt - 30) + 'px';
}
}
function mover()
{
if (scroll!=0)
{
scroller.style.top=window.event.clientY - 50;
}
}
function yes()
{
scroll=1;
}
function no()
{
scroll=0;
}
</script>
</head>
<body>
<div id="scroller" style="border:1px solid #000000; visibility:visible; position:absolute; left:557px; top:32px; width:15px; height:169px; background-color:'#CCCCCC'; padding:3px; z-Index:18"
onmousemove="mover();" onmousedown="yes();" onmouseup="no();" onmouseout="no(); ">
</div>
<div style=" overflow: hidden; border-style:solid; border-width:1px; position: absolute; width: 548px; height: 375px; margin-left: 0px; margin-top: -4px; z-index:7; margin-right:0px; margin-bottom:0px">
<div id="content" style="margin-top: 0px; margin-left: 10px; margin-right: 10px; ">
<p align="justify">
<font color="darkgray" size="1" face="Arial">
Здесь предполагается много-много текста...
</font>
<p>
</div>
</div>
<div style="position: absolute; cursor: default; width: 15px; height: 21px; z-index: 5; left: 557px; top: 11px; border-style: solid; border-width: 1px; background-color:#CCCCCC" id="layer1"
onclick="scrollUp('content'); this.blur(); return false; javascript:void(0);">
</div>
<div style="position: absolute; cursor: default; width: 15px; height: 21px; z-index: 5; left: 557px; top: 365px; border-style: solid; border-width: 1px; background-color:#CCCCCC" id="layer2"
onclick="scrollDown('content'); this.blur(); return false; javascript:void(0);">
</div>
<div style="position: absolute; cursor: default; width: 562px; height: 375px; z-index: 1; left: 10px; top: 11px; border-style: solid; border-width: 1px; background-color: #FFFFFF" id="layer3">
</div>
</body>
</html>
|
Может кто что-нибудь подскажет. |