JavaScript滾動功能

我在javascript中使用鼠標滾輪使用事件偵聽器創建了自己的滾動函數，問題是，該函數允許用戶大致保持向下滾動而不是停止一旦它們到達底部滾動DIV ..JavaScript滾動功能

有問題的功能：

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

在的jsfiddle，你會看到紅色框滾動漲過頭。不知道如何解決它。

請幫忙。

來源

2013-07-01 Sir

看起來事件監聽程序沒有連接正確。添加警報（'egewrweg'）;在功能的開始 - 對我來說，當我滾動時沒有任何提醒信息。 – frenchie

@frenchie http://jsfiddle.net/RjEr7/8/警報正常工作。 – Sir

http://jsfiddle.net/RjEr7/9/這個工程;不知道爲什麼，但即使剛更新的小提琴也不會觸發警報。使用jQuery滾動處理程序進行調試，以便至少我們確信處理程序能夠正常工作。 – frenchie

試試這個，它應該是相當多的自我explantory：

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);

代替這一切，如果別的東西，它夾-can move和0之間的位置。還請注意使用clientHeight而不是offsetHeight，以便排除父母的邊框尺寸！

您的邏輯問題是，它沒有包含允許孩子在頂部方向移動的最大距離，它會以50像素爲單位跳躍，並且如果新計算出的孩子身高小於父母，它只是停下來，它也需要將邊界限制到最大，類似於你已經在底部方向（if(i > 0) i = 0）所做的。此外，你會從父母高度減去50個像素（無論出於何種原因？），這將使超調更大。

來源

2013-07-01 02:23:10 ndm

我的邏輯錯在哪裏？ – Sir

對不起，昨天已經很晚了，我已經爲你的邏輯添加了一個簡短的解釋。 – ndm

啊謝謝你:) – Sir

你可能想試試這個。我不知道它是否適用於Firefox以外的其他任何網絡：

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

來源

2013-07-31 23:09:17

JavaScript滾動功能

回答

相關問題