Funzione di scorrimento Javascript

Question

Ho creato la mia funzione di scorrimento in javascript utilizzando un listener di eventi con la rotellina del mouse, il problema è che la funzione consente all'utente di continuare a scorrere verso il basso fino a lontano anziché fermarsi una volta raggiunto il fondo del scrolling div ..

Questo è quello che ho: http://jsfiddle.net/RjEr7/7/

la funzione in questione:

function do_it(e){ 
    var jump = 50; 
    var parentHeight = parseInt(this.parentNode.offsetHeight)-50; 
    var childHeight = parseInt(this.offsetHeight); 
    var i = parseInt(this.style.marginTop, 10) || 0; 
    var wheel = e.wheelDeltaY; 
    var childHeightNew = childHeight + i; 

    if(wheel == -120){ 
     if(childHeightNew > parentHeight){             
       i -= jump; 
     } 
    }else if(wheel == 120){ 
     if((childHeightNew < childHeight) && i < 0){ 
       i += jump; 
      if(i>0){ 
        i=0; 
      } 
     } 
    } 
this.style.marginTop = i + 'px'; 
} 

nel JSfiddle, vedrete i rotoli scatola rossa troppo in alto. Non so come risolverlo però.

Per favore aiuto.

Answer 1

Prova questo, dovrebbe essere più o meno esplicative auto:

function do_it(e) { 
    var skip = 50; 

    var parentHeight = parseInt(this.parentNode.clientHeight); 
    var childHeight = parseInt(this.offsetHeight); 
    var canMove = childHeight - parentHeight; 
    var distance = e.wheelDeltaY < 0 ? -skip : skip; 

    var pos = parseInt(this.style.marginTop, 10) || 0; 
    pos = Math.min(0, Math.max(-canMove, pos + distance)); 

    this.style.marginTop = pos + 'px'; 
} 

document.getElementById('id').addEventListener('mousewheel',do_it,false); 

Invece di tutto questo se roba altrimenti morsetti la posizione tra -can move e 0. Si noti inoltre l'uso di clientHeight anziché offsetHeight in modo da escludere la dimensione del bordo dei genitori!

Il problema con la tua logica è che non incorpora la distanza massima che il bambino può spostare nella direzione superiore, salterà a passi di 50 pixel e nel caso in cui l'altezza del bambino appena calcolata sia inferiore alla genitore, si ferma, dove dovrebbe anche limitare il margine al massimo, simile a quello che stai già facendo per la direzione in basso (if(i > 0) i = 0). Inoltre stai sottrarre 50 pixel dall'altezza genitore (per qualsiasi motivo?) Che renderà il overshoot ancora più grande.

Answer 2

Si consiglia di provare questo. Non ho idea se funziona in qualcosa di diverso da Firefox però:

function do_it(e) { 
    if(!e) { 
    var e = window.event; 
    } 

    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    switch(delta) { 
    case 1: 
     e.currentTarget.scrollTop -= 50; 
     break; 

    case -1: 
     e.currentTarget.scrollTop += 50; 
     break; 
    } 
}