如果用户正在滚动,我如何在 javascript 中检测?
检测用户是否正在滚动
IT技术
javascript
2021-02-21 01:50:08
5个回答
这有效:
window.onscroll = function (e) {
// called when the window is scrolled.
}
编辑:
你说这是一个 TimeInterval 中的函数..
尝试这样做:
userHasScrolled = false;
window.onscroll = function (e)
{
userHasScrolled = true;
}
然后在您的 Interval 中插入:
if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}
您刚刚在标签中说了 javascript,所以@Wampie Driessen 的帖子可以帮助您。
我也想贡献一下,所以如果你需要的话,你可以在使用 jQuery 时使用以下内容。
//Firefox
$('#elem').bind('DOMMouseScroll', function(e){
if(e.detail > 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('#elem').bind('mousewheel', function(e){
if(e.wheelDelta< 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});
另一个例子:
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
_direction = 'down';
}
else
{
_direction = 'up';
}
_top = _cur_top;
console.log(_direction);
});
});
window.addEventListener("scroll",function(){
window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}
将 500 更改为您认为用户“不再滚动”的最后一个滚动事件之后的毫秒数。
(addEventListener
比onScroll
因为前者可以与使用 的任何其他代码很好地共存更好onScroll
。)
如果您想检测用户何时滚动到某个div,您可以执行以下操作:
window.onscroll = function() {
var distanceScrolled = document.documentElement.scrollTop;
console.log('Scrolled: ' + distanceScrolled);
}
例如,如果您的div在滚动到位置 112 后出现:
window.onscroll = function() {
var distanceScrolled = document.documentElement.scrollTop;
if (distanceScrolled > 112) {
do something...
}
}
但是正如您所看到的,您不需要div,只需要您希望发生的偏移距离。
使用间隔检查
您可以设置一个时间间隔来继续检查用户是否已经滚动,然后相应地做一些事情。
借用了伟大的John Resig在他的文章中。
例子:
let didScroll = false;
window.onscroll = () => didScroll = true;
setInterval(() => {
if ( didScroll ) {
didScroll = false;
console.log('Someone scrolled me!')
}
}, 250);