Mi a hiba a kódban? DIV görgetése egérgörgővel Firefox alatt....
Megoldottam a weblapomon egy div görgetését gördítősávval ahol a csúszkával is lehet görgetni a tartalmat és a csúszka feletti és alatti képekkel is az onMouseOver eseményre.
Egy dolog maradt csak hátra: ezt a dobozkát az egérgörgővel mozgatni. Ehhez semmi ötletem, kiinduló alapom nem volt.
Majd egy internetes fórumon találtam egy kódrészletet és nagyon megörültem neki. Aki közzé tette ő is bevallotta, hogy még hiányos de alapvetően a görgetés működik. Ezzel nincs is baj a részleteket én már megoldottam volna...
de hiába örültem, hogy működik a görgetés safari, opera, explorer és chrome alatt, mert firefoxban nem ment. Aztán megörültem mert láttam a neten, hogy a firefoxban másként kell beállítani több mindent is. De a kódot nézve ott ezek is megvannak oldva, de firefoxban mégsem működik.
Itt a kód: mi lehet a baj? (Ezzel a megjegyzéssel jelöltem ahol kezdődik az egérgörgőre vonatkozó rész: "// DIV MOZGATÁSÁHOZ EGÉRGÖRGŐVEL:")
■ Egy dolog maradt csak hátra: ezt a dobozkát az egérgörgővel mozgatni. Ehhez semmi ötletem, kiinduló alapom nem volt.
Majd egy internetes fórumon találtam egy kódrészletet és nagyon megörültem neki. Aki közzé tette ő is bevallotta, hogy még hiányos de alapvetően a görgetés működik. Ezzel nincs is baj a részleteket én már megoldottam volna...
de hiába örültem, hogy működik a görgetés safari, opera, explorer és chrome alatt, mert firefoxban nem ment. Aztán megörültem mert láttam a neten, hogy a firefoxban másként kell beállítani több mindent is. De a kódot nézve ott ezek is megvannak oldva, de firefoxban mégsem működik.
Itt a kód: mi lehet a baj? (Ezzel a megjegyzéssel jelöltem ahol kezdődik az egérgörgőre vonatkozó rész: "// DIV MOZGATÁSÁHOZ EGÉRGÖRGŐVEL:")
var scrollBox;
var content;
var button = false;
var enableScrolling = false;
var startY;
var mouseY;
var scrollBoxTop;
var IE = document.all?true:false;
if(!IE)
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
//lenyomtuk az egér gombját
function mouseDown()
{
button = true;
}
//felengedtük az egér gombját
function mouseUp()
{
button = false;
enableScrolling = false;
}
//mozgatjuk az egeret
function mouseMove(e)
{
if(IE)
{
mouseY = event.clientY + document.body.scrollTop;
}
else
{
mouseY = e.pageY;
}
// NS4 -ben lehet negatív is, ilyenkor nullázunk
if(mouseY < 0)
{
mouseY = 0
}
if(button)
{
if(enableScrolling)
{
//mozgatjuk a scrollboxot
scrollBox = document.getElementById('scrollBox');
content = document.getElementById('content');
var nextTop = scrollBoxTop + mouseY - startY;
if((nextTop > -1) && (nextTop < (scrollLength + 1)))
{
wheelDelta = scrollBoxTop + mouseY - startY;
scrollBox.style.top = scrollBoxTop + mouseY - startY + 'px';
content.style.top = "-" + scrollBox.style.top;
}
}
}
return true
}
//megfogtuk a scrollboxot
function scrollPressed()
{
enableScrolling = true;
scrollBoxTop = parseInt(document.getElementById('scrollBox').style.top);
startY = mouseY;
}
// DIV MOZGATÁSÁHOZ EGÉRGÖRGŐVEL:
//plusz változók:
var enableWheel = false;
var wheelDelta = 0;
//ez volt, de kezdő értéket kell adni
var scrollBoxTop = 0;
//egér görgő init
if(window.addEventListener) {//ha Firefox
document.addEventListener('DOMMouseScroll', mouseScroll, false);
}
//ha bármi más
document.onmousewheel = mouseScroll;
//görgetjük az egér görgőt
function mouseScroll() {
if(enableWheel) {
if (!event) event = window.event;
// delta normalizálása
if (event.wheelDelta) { // IE és Opera
delta = event.wheelDelta / 120;
}
else if (event.detail) { //W3C
delta = -event.detail / 3;
}
scrollBox = document.getElementById('scrollBox');
content = document.getElementById('content');
var nextWheelDelta = wheelDelta - 5*delta; //így egy görgetés 5px mozgást eredményez
if((nextWheelDelta > -1) && (nextWheelDelta < (scrollLength + 1))) {
wheelDelta = nextWheelDelta;
scrollBox.style.top = scrollBoxTop + nextWheelDelta + 'px';
content.style.top = "-" + scrollBox.style.top;
}
}
}
<div class="container" onmouseout="enableWheel=false;" onmouseover="enableWheel=true;">
<div id="content" style="top:0px;">
blablabla 1<br />
blablabla 2<br />
blablabla 3<br />
blablabla 4<br />
blablabla 5<br />
blablabla 6<br />
blablabla 7<br />
blablabla 8<br />
blablabla 9<br />
blablabla 10<br />
blablabla 11<br />
blablabla 12<br />
blablabla 13<br />
blablabla 14<br />
</div>
<div id="scrollBar">
<div id="scrollBox" style="top:0px; height:10px;" onmousedown="scrollPressed()">
</div>
</div>
<script type="text/javascript">
var contHeight = document.getElementById('content').offsetHeight;
var scrollBarHeight = document.getElementById('scrollBar').offsetHeight;
var scrollLength = contHeight - scrollBarHeight;
document.getElementById('scrollBox').style.height = scrollBarHeight - scrollLength + 'px';
</script>
</div>
var content;
var button = false;
var enableScrolling = false;
var startY;
var mouseY;
var scrollBoxTop;
var IE = document.all?true:false;
if(!IE)
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
//lenyomtuk az egér gombját
function mouseDown()
{
button = true;
}
//felengedtük az egér gombját
function mouseUp()
{
button = false;
enableScrolling = false;
}
//mozgatjuk az egeret
function mouseMove(e)
{
if(IE)
{
mouseY = event.clientY + document.body.scrollTop;
}
else
{
mouseY = e.pageY;
}
// NS4 -ben lehet negatív is, ilyenkor nullázunk
if(mouseY < 0)
{
mouseY = 0
}
if(button)
{
if(enableScrolling)
{
//mozgatjuk a scrollboxot
scrollBox = document.getElementById('scrollBox');
content = document.getElementById('content');
var nextTop = scrollBoxTop + mouseY - startY;
if((nextTop > -1) && (nextTop < (scrollLength + 1)))
{
wheelDelta = scrollBoxTop + mouseY - startY;
scrollBox.style.top = scrollBoxTop + mouseY - startY + 'px';
content.style.top = "-" + scrollBox.style.top;
}
}
}
return true
}
//megfogtuk a scrollboxot
function scrollPressed()
{
enableScrolling = true;
scrollBoxTop = parseInt(document.getElementById('scrollBox').style.top);
startY = mouseY;
}
// DIV MOZGATÁSÁHOZ EGÉRGÖRGŐVEL:
//plusz változók:
var enableWheel = false;
var wheelDelta = 0;
//ez volt, de kezdő értéket kell adni
var scrollBoxTop = 0;
//egér görgő init
if(window.addEventListener) {//ha Firefox
document.addEventListener('DOMMouseScroll', mouseScroll, false);
}
//ha bármi más
document.onmousewheel = mouseScroll;
//görgetjük az egér görgőt
function mouseScroll() {
if(enableWheel) {
if (!event) event = window.event;
// delta normalizálása
if (event.wheelDelta) { // IE és Opera
delta = event.wheelDelta / 120;
}
else if (event.detail) { //W3C
delta = -event.detail / 3;
}
scrollBox = document.getElementById('scrollBox');
content = document.getElementById('content');
var nextWheelDelta = wheelDelta - 5*delta; //így egy görgetés 5px mozgást eredményez
if((nextWheelDelta > -1) && (nextWheelDelta < (scrollLength + 1))) {
wheelDelta = nextWheelDelta;
scrollBox.style.top = scrollBoxTop + nextWheelDelta + 'px';
content.style.top = "-" + scrollBox.style.top;
}
}
}
<div class="container" onmouseout="enableWheel=false;" onmouseover="enableWheel=true;">
<div id="content" style="top:0px;">
blablabla 1<br />
blablabla 2<br />
blablabla 3<br />
blablabla 4<br />
blablabla 5<br />
blablabla 6<br />
blablabla 7<br />
blablabla 8<br />
blablabla 9<br />
blablabla 10<br />
blablabla 11<br />
blablabla 12<br />
blablabla 13<br />
blablabla 14<br />
</div>
<div id="scrollBar">
<div id="scrollBox" style="top:0px; height:10px;" onmousedown="scrollPressed()">
</div>
</div>
<script type="text/javascript">
var contHeight = document.getElementById('content').offsetHeight;
var scrollBarHeight = document.getElementById('scrollBar').offsetHeight;
var scrollLength = contHeight - scrollBarHeight;
document.getElementById('scrollBox').style.height = scrollBarHeight - scrollLength + 'px';
</script>
</div>
Amit tudni lehet...
De azt nem tudom lekérdezni sehogy firefoxban, hogy felfelé vagy lefelé görgetek-e. Tehát akor erre kéne vmi megoldás!!
Ezek nem működnek firefoxban:
// delta normalizálása
if (event.wheelDelta) { // IE és Opera
delta = event.wheelDelta / 120;
}
else if (event.detail) { //W3C
delta = -event.detail / 3;
}
A megoldás... : )
Hosszú kutatás után megleltem a megoldást arra, hogy a Firefoxban is lekérdezhessük, hogy az egérgörgővel felfelé vagy lefelé görgetünk.
Itt van:
Ezt a függvényt Firefoxban (ahogy én tapasztaltam) a BODY elemben kell meghívni:
var elem = document.getElementById ("azadottDivIdje");
if (elem.addEventListener) {
elem.addEventListener ("DOMMouseScroll", MouseScroll, false);
}
}
Majd ezzel a függvénnyel már megtudjuk, hogy merre görgetünk (felfelé negatívot (-3) lefelé pozitívot (3) ad vissza, de a példában "rolled"-nek nevezett változó SOHA nem lehet nulla mivel az se nem negatív se nem pozitív:
if (event.wheelDelta === undefined) {
rolled = -10*event.detail;
}
}
itt pl.
Ez a teszt hozzá http://adomas.org/javascript-mouse-wheel/test.html
Illetve van egy remek jQuery plugin is a mousewheel-re.