修改

Question

我想确切知道内容在实际滚动并根据具体情况进行调整之前会滚动多少像素。

$(window).on('wheel', function(e) {
    console.log(e);
});

$(window).scroll(function(e) {
    console.log(e);
});

如何获得以像素为单位滚动的金额，然后在实际滚动发生之前滚动不同的金额？

Answer 1

滚动事件在滚动发生后触发，因此无法进行。

Answer 2

计算这个，这是我使用的。假设我们的元素高200像素，内容为1000像素; $(el)[0].scrollHeight是可滚动内容的数量，$(element)[0].scrollTop是滚动了多少可滚动内容并位于元素＆＃34; s＆＃34; viewport＆＃34;。

可以滚动多少：

var scrollablePixels = $(element)[0].scrollHeight - $(element).scrollTop(); // 1000px

如果已完全滚动，则以下内容将返回true：

var hasScrolledToBottom = $(element)[0].scrollHeight - $(element).scrollTop() === $(element).height(); // false -- hasn't been scrolled yet

设置滚动的金额：

var pixelsToScrollElement = $(element).scrollTop(800);

现在让我们再次运行hasScrolledToBottom测试

$(element)[0].scrollHeight - $(element).scrollTop() === $(element).height(); // true

修改

对其他帖子的回答将有所帮助：IN VIEWPORT?

基本上你可以结合我列出的内容以及在那里发布的内容进行计算

编辑3

DEMO

window.onmousewheel = document.onmousewheel = customScroll;

function customScroll(e) {
    var scrollTime = 1200,
        scrollDistance = 200,
        wheelChange = e.wheelDelta ? e.wheelDelta / 120 
                            : e.detail ? -e.detail / 3
                                       : 0,
        scrollTop = $(window).scrollTop() - scrollDistance * wheelChange;

    $('html, body').stop().animate({
        scrollTop: scrollTop
    }, scrollTime);

    e.preventDefault();
    e.returnValue = false;
}

$(window).on('DOMMouseScroll', function(e) {
    customScroll(e);
});

如何查看将滚动和修改金额的金额？

2 个答案:

修改

编辑3

DEMO