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滚动功能

回答

相关问题