javascript - 当滚动停止百分比时触发

Question

当用户停止滚动并提醒一些消息时，我需要触发。但我需要按百分比触发它。

例如，如果用户滚动，但当他停止滚动以及滚动超过窗口的 80% 时，我想向用户发出一些警告消息。

我有这个代码，当 srcoll 停止时触发，并且不知道如何使用滚动百分比来实现此工作:

$.fn.scrollStopped = function(callback) {           
    $(this).scroll(function(){
        var self = this, $this = $(self);
        if ($this.data('scrollTimeout')) {
            clearTimeout($this.data('scrollTimeout'));
        }
        $this.data('scrollTimeout', setTimeout(callback,250,self));
    });
};

jQuery(window).scrollStopped(function(){
    alert('stopped');
});

Answer 1

可以计算文档和窗口的高度，然后与滚动条当前的垂直位置进行比较:

$.fn.scrollStopped = function(callback) {           
    $(this).scroll(function(){
        var self = this, $this = $(self);
        if ($this.data('scrollTimeout')) {
            clearTimeout($this.data('scrollTimeout'));
        }
        $this.data('scrollTimeout', setTimeout(callback,250,self));
    });
};

jQuery(window).scrollStopped(function(){
    console.log(jQuery(window).scrollTop());
    if($(window).scrollTop() > ($(document).height() - $(window).height())*0.8){
       alert('You have scrolled more than 80%');
    }

});

Try it yourself 。您可能想阅读有关这两个函数的更多详细信息； .scrollTop()和 .height() .