是否有可靠的方法使用javascript/jQuery在所有设备上检测滚动?
我已经为此挣扎了一段时间,我很惊讶这样做并不简单 我需要检测用户何时滚动页面,无论是使用鼠标、滚动条还是通过触摸移动设备。jQuery有其是否有可靠的方法使用javascript/jQuery在所有设备上检测滚动?,javascript,jquery,Javascript,Jquery,我已经为此挣扎了一段时间,我很惊讶这样做并不简单 我需要检测用户何时滚动页面,无论是使用鼠标、滚动条还是通过触摸移动设备。jQuery有其scroll()函数,该函数工作正常,但它要求页面实际上是滚动的。我想检测页面是否在滚动(比如我到达了页面的末尾,也没有地方可以滚动..我仍然想知道用户是否正在尝试滚动) 我发现了另一个类似的问题,在检测滚动输入的过程中,即使页面没有滚动,我得到了以下代码块: if (document.addEventListener) { document.addE
scroll()
函数,该函数工作正常,但它要求页面实际上是滚动的。我想检测页面是否在滚动(比如我到达了页面的末尾,也没有地方可以滚动..我仍然想知道用户是否正在尝试滚动)
我发现了另一个类似的问题,在检测滚动输入的过程中,即使页面没有滚动,我得到了以下代码块:
if (document.addEventListener) {
document.addEventListener("mousewheel", MouseWheelHandler(), false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
sq.attachEvent("onmousewheel", MouseWheelHandler());
}
function MouseWheelHandler() {
return function (e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta < 0) {
// increase scroll amount
} else {
// decrease scroll amount
}
}
return false;
}
if(document.addEventListener){
document.addEventListener(“mousewheel”,MouseWheelHandler(),false);
document.addEventListener(“DOMMouseScroll”,mouseweelHandler(),false);
}否则{
sq.attachEvent(“onmousewheel”,MouseWheelHandler());
}
函数mouseweelHandler(){
返回函数(e){
var e=window.event | e;
var delta=数学最大值(-1,数学最小值(1,(e.车轮delta | |-e.细节));
if(δ<0){
//增加滚动量
}否则{
//减少滚动量
}
}
返回false;
}
起初,这似乎起到了作用,但我发现它在不同类型的老鼠身上并没有真正返回平衡的结果,而且在触摸事件上也不太顺利,这是这个问题的核心方面
我在一个项目中使用它,它在滚动上做了很多有趣的事情,而实际的页面根本没有滚动。。。但是我遇到了一个问题,我所有的标准鼠标速度都非常慢,而我的苹果魔术鼠标速度却非常快。我知道这里自然会有一些不同,因为神奇的老鼠确实滚动得更快,但这种差异远比正常情况下老鼠之间的差异更不平衡
我希望有一种改进的方法,通过各种不同的输入得到更可靠的结果。有什么建议吗
编辑:
为了澄清,为了让答案对我有用,它需要对一个不可滚动的元素起作用。我有一个完全不滚动的页面,但是当用户滚动时会触发其他事件。这意味着我不能使用基于窗口滚动位置的属性(例如
scrollTop()
).您应该使用window.onscroll大多数用法,然后创建一个新的侦听器来专门处理顶部和底部滚动的情况。我建议使用桌面浏览器事件和下面这样一个专门编码的触摸响应程序来检测他们是否试图滚动,当前窗口的方向以及是否可能。滚动值
var isOverScroll = function isOverScroll ( touchStartY, touchEndY ) {
if ( Math.abs( touchStartY - touchEndY ) < 5 ) &&
( ( window.scrollY = window.innerHeight && touchStartY - touchEndY > 0 ) ||
( window.scrollY = 0 && touchStartY - touchEndY < 0 ) ) ) {
return false;
}
return true;
}
一个可能的解决方案是使用一个类似滚动的插件 在此示例中:
他们使用“拉动刷新”功能,在达到可用的最大滚动时将触发该功能,您可以在此使用任何自定义功能(即使您的项目不可滚动)。对于手机,尝试返回到
触地
/触地移动
/触地
事件,并使用jQuery检测滚动位置scrollTop()
scrollTop()(如溢出:滚动;
或溢出:自动;
)元素。是的,我的元素不可滚动,因此我无法使用它。但我需要检测是否存在滚动输入。然后使用$(“#partinmyelementthattmoves”).css('top')
?我的观点是,您可以返回到触摸事件来移动“滚动”元素。
transition: transform3d( 0, YOURSCROLLVALUE , 0);