滚动事件监听器 javascript
[英]Scroll event listener javascript
问题描述
当用户在某个可以使用的文本框中滚动时，是否有一个 js 侦听器？ 有点像 onclick 除了滚动。 我看到HTML5 数字输入滚动的事件侦听器 - 仅限 Chrome ，但这似乎仅适用于 Chrome。 我正在寻找跨浏览器的东西。
6 个解决方案
解决方案1
120 已采纳 2013-08-30 21:38:11
对于那些发现这个问题希望找到不涉及 jQuery 的答案的人，您可以使用正常的事件侦听挂钩到window “滚动”事件。 假设我们要添加滚动监听一些 CSS-selector-able 元素：
// what should we do when scrolling occurs
var runOnScroll = function(evt) {
// not the most exciting thing, but a thing nonetheless
console.log(evt.target);
};
// grab elements as array, rather than as NodeList
var elements = document.querySelectorAll("...");
elements = Array.prototype.slice.call(elements);
// and then make each element do something on scroll
elements.forEach(function(element) {
window.addEventListener("scroll", runOnScroll, {passive: true});
});
（使用passive属性告诉浏览器这个事件不会干扰滚动本身）
对于奖励积分，您可以为滚动处理程序提供一个锁定机制，以便在我们已经在滚动时它不会运行：
// global lock, so put this code in a closure of some sort so you're not polluting.
var locked = false;
var lastCall = false;
var runOnScroll = function(evt) {
if(locked) return;
if (lastCall) clearTimeout(lastCall);
lastCall = setTimeout(() => {
runOnScroll(evt);
// you do this because you want to handle the last
// scroll event, even if it occurred while another
// event was being processed.
}, 200);
// ...your code goes here...
locked = false;
};
解决方案2
6 2015-05-06 07:24:51
我一直在寻找使用老式 JS（没有 JQuery）解决 sticy menue 的解决方案。 所以我建立了一个小测试来玩它。 我认为它可以帮助那些在 js 中寻找解决方案的人。 它需要改进菜单，使其更光滑。 我还找到了一个很好的 JQuery 解决方案，它克隆原始 div 而不是固定位置，它更好，因为修复后不需要替换页面元素的其余部分。 任何人都知道如何用 JS 做到这一点？ 请大家评论、纠正和改进。
<!DOCTYPE html>
<html>
<head>
<script>
// addEvent function by John Resig:
// http://ejohn.org/projects/flexible-javascript-events/
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
obj.attachEvent( 'on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
}
function getScrollY() {
var scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
} else if( document.body && document.body.scrollTop ) {
//DOM compliant
scrOfY = document.body.scrollTop;
}
return scrOfY;
}
</script>
<style>
#mydiv {
height:100px;
width:100%;
}
#fdiv {
height:100px;
width:100%;
}
</style>
</head>
<body>
<!-- HTML for example event goes here -->
<div id="fdiv" style="background-color:red;position:fix">
</div>
<div id="mydiv" style="background-color:yellow">
</div>
<div id="fdiv" style="background-color:green">
</div>
<script>
// Script for example event goes here
addEvent(window, 'scroll', function(event) {
var x = document.getElementById("mydiv");
var y = getScrollY();
if (y >= 100) {
x.style.position = "fixed";
x.style.top= "0";
}
});
</script>
</body>
</html>
解决方案3
3 2013-10-22 10:13:41
下面的基本方法不能满足您的要求吗？
具有 div 的 HTML 代码
<div id="mydiv" onscroll='myMethod();'>
JS将有以下代码
function myMethod(){ alert(1); }
解决方案4
0 2018-12-27 13:46:09
当用户在可以使用的某个文本框中滚动时，是否有 js 侦听器？
DOM L3 UI Events规范给出了最初的定义，但被认为已经过时。
要添加单个处理程序，您可以执行以下操作：
let isTicking;
const debounce = (callback, evt) => {
if (isTicking) return;
requestAnimationFrame(() => {
callback(evt);
isTicking = false;
});
isTicking = true;
};
const handleScroll = evt => console.log(evt, window.scrollX, window.scrollY);
document.defaultView.onscroll = evt => debounce(handleScroll, evt);
对于多个处理程序，或者如果出于样式原因更可取，您可以使用addEventListener ，而不是将您的处理程序分配给onscroll如上所示。
如果使用来自 lodash 的 _.debounce 之类的_.debounce ，你可能会逃脱：
const handleScroll = evt => console.log(evt, window.scrollX, window.scrollY);
document.defaultView.onscroll = evt => _.debounce(() => handleScroll(evt));
检查浏览器兼容性，并确保在完成之前在某些实际设备上进行测试。
解决方案5
0 2022-12-08 18:21:18
解决方案6
-1 2021-07-06 23:05:50
let lastKnownScrollPosition = 0;
let ticking = false;
function doSomething(scrollPos) {
// Do something with the scroll position
}
document.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
});
JavaScript 滚动事件侦听器不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.