ugrás a tartalomhoz

Mi a hiba a kódban? DIV görgetése egérgörgővel Firefox alatt....

haho · 2011. Feb. 12. (Szo), 07.43
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:")

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>
 
1

Amit tudni lehet...

haho · 2011. Feb. 12. (Szo), 10.03
A Firefox felismeri ha a divre vittem az egeret és még azt is felismeri ha görgetek felette a görgővel.

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:

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;
     }
2

A megoldás... : )

haho · 2011. Feb. 12. (Szo), 10.54
Bocsánat, hogy itt vezettem le a feszültséget ami az este folyamán összegyűlt. (Bár szerintem még nem sikerült teljesen levezetni.)

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:
function eztabodyba () {
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:
function felfelevagylefele() {
    if (event.wheelDelta === undefined) {
    rolled = -10*event.detail;
    }
}
3

itt pl.

bb0072 · 2011. Feb. 14. (H), 11.26
http://adomas.org/javascript-mouse-wheel/

Ez a teszt hozzá http://adomas.org/javascript-mouse-wheel/test.html


Illetve van egy remek jQuery plugin is a mousewheel-re.