滚动事件监听器javascript [英] Scroll event listener javascript

问题描述

当用户滚动某个可以使用的文本框时，是否有js监听器？有点像onclick除了滚动。我看到用于数字输入滚动的HTML5事件监听器 - 仅限Chrome 但这似乎只适用于镀铬。我正在寻找跨浏览器的东西。

Is there a js listener for when a user scrolls in a certain textbox that can be used? Kinda like onclick except for scrolling. I saw HTML5 event listener for number input scroll - Chrome only but that seems to be for chrome only. I'm looking for something cross-browser.

推荐答案

对于那些发现这个问题的人希望找到一个没有的答案涉及jQuery，你使用普通事件监听挂钩到窗口滚动事件。假设我们想要添加滚动侦听一些支持CSS-selector的元素：

For those who found this question hoping to find an answer that doesn't involve jQuery, you hook into the window "scroll" event using normal event listening. Say we want to add scroll listening to a number of CSS-selector-able elements:

// 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);
});

对于奖励积分，你可以给滚动处理程序一个锁机制，这样它就不会运行我们已经滚动了：

For bonus points, you can give the scroll handler a lock mechanism so that it doesn't run if we're already scrolling:

// global lock, so put this code in a closure of some sort so you're not polluting.
var locked = false;
var runOnScroll =  function(evt) {
  if(locked) return;
  locked = true;
  // ...your code goes here...
  locked = false;
};

这篇关于滚动事件监听器javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！