Question

我确信此问题之前已被问过，但我找不到它可能是因为我使用的条款不准确。

每次访问者向下或向上滚动时，我希望页面按预先固定的数量滚动（100px或下一个DOM的高度）。

Answer 1

＆＃13;

http://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=ktt3C7nQbbA&format=json

＆＃13;

document.body.onscroll = scrollFunc;

function scrollFunc(e) {
    if ( typeof scrollFunc.x == 'undefined' ) {
        scrollFunc.x=window.pageXOffset;
        scrollFunc.y=window.pageYOffset;
    }
    var diffX=scrollFunc.x-window.pageXOffset;
    var diffY=scrollFunc.y-window.pageYOffset;

    if( diffX<0 ) {
        // Scroll right
    } else if( diffX>0 ) {
        // Scroll left
    } else if( diffY<0 ) {
        document.body.scrollTop += 500;//using 500 to increase effect, you can switch to 100
    } else if( diffY>0 ) {
        document.body.scrollTop -= 500;//using 500 to increase effect, you can switch to 100
    } else {
        // First scroll event
    }
    scrollFunc.x=window.pageXOffset;
    scrollFunc.y=window.pageYOffset;
}

＆＃13;

<强>更新

解决方案需要考虑滚动方向。上面已更新以使用Can one use Window.Onscroll method to include detection of scroll direction?

Answer 2

Javascript有一个滚动功能：

body.onscroll=function(){yourcode};

这将列出滚动事件。按照您的意思，单击鼠标滚轮就是一个事件，因此每次都会触发。

如果您使用此：

document.body.scrollTop += X;

其中X是您想要移动的像素高度，即您的100px，那么每个鼠标滚轮移动将是100px。您可以根据它们的位置动态更改100px。

正如下面指出的有用评论，现在将禁用向上滚动。要启用向上滚动，您需要记住它们的最后滚动位置，以便确定它们是上升还是下降。将其存储在变量中：

var last_scroll = 0;
body.onscroll=function(){
   var new_scroll= document.body.scrollTop();
   if (last_scroll < new_scroll){
      // we are going down
      document.body.scrollTop += X;
   }else{
      // we are going up
      document.body.scrollTop -= X;
   }
   last_scroll = new_scroll;
};

编辑：正如下面的Hugo Delsing所建议的那样，您也可以按照此SO帖子中的说明使用delta：Single function call on scroll event?

为了完整性，这里是JSfiddle的代码：

//Firefox
$('html').on('DOMMouseScroll', function (e) {
    var delta = e.originalEvent.detail;

    if (delta > 0) {

        //alert('You scrolled up');
        $(".notify").append("<p>You scrolled up</p>");

    } else if (delta < 0) {

        //alert('You scrolled down');
        $(".notify").append("<p>You scrolled down</p>");
    }

});

var flag;
//Everything else
$('html').on('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;

    if (flag != 1 && delta < 0) {
        flag = 1;
        //alert('You scrolled down');
        $(".notify").append("<p>You scrolled down</p>");

    } else if (flag != 2 && delta > 0) {
        flag = 2;
        //alert('You scrolled up');
        $(".notify").append("<p>You scrolled up</p>");
    }
});

他们使用带有'notify'类的div来显示方向。享受并且不要忘记将您的加号发送到原始帖子。

如何使用javascript中的每个鼠标滚动按预定高度进行页面滚动？

2 个答案: