5

我使用带有鼠标滚轮的事件侦听器在 javascript 中制作了自己的滚动函数，问题是，该函数允许用户在到达滚动 div 的底部后继续粗略地向下滚动而不是停止。

这就是我所拥有的：http: //jsfiddle.net/RjEr7/7/

有问题的功能：

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 中，您会看到红色框向上滚动太多。不知道如何解决它。

请帮忙。

4

2 回答 2

2

试试这个，它应该是自我解释的：

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

而不是所有这些 if else 东西它钳制和之间的-can move位置0。还要注意使用clientHeight代替，offsetHeight这样父母的边框大小就被排除在外了！

你的逻辑的问题是它没有包含允许孩子在顶部方向移动的最大距离，它会以 50 像素的步长跳跃，如果新计算的孩子高度小于父母，它只是停止，它还需要将边距限制为最大值，类似于您已经为底部方向 ( if(i > 0) i = 0) 所做的事情。此外，您将从父高度减去 50 像素（无论出于何种原因？），这将使超调更大。

于 2013-07-01T02:23:10.587 回答
0

你可能想试试这个。我不知道它是否适用于 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-31T23:09:17.753 回答