滚动事件监听器的JavaScript
有一个js的监听器，当用户滚动可以使用的特定文本框？ 有点像滚动除了点击。 我看到了数字input滚动的HTML5事件监听器 – 仅Chrome，但似乎只用于Chrome浏览器 。 我正在寻找一些跨浏览器的东西。
对于那些发现这个问题希望find一个不涉及jQuery的答案，你使用正常的事件侦听钩入window “滚动”事件。 假设我们要添加滚动监听一些CSSselect器的元素：
// 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); });
对于奖励点，您可以给滚动处理程序一个locking机制，以便它不会运行，如果我们已经滚动：
// 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; };
我正在寻找很多与老派JS（没有JQuery）的稳定菜单的解决scheme。 所以我build立一个小testing来玩吧。 我认为这对于那些在js中寻找解决scheme的人来说可能是有帮助的。 它需要解除后退的手段，并使其更加顺畅。 我还发现一个很好的JQuery解决scheme，克隆原始的div，而不是固定的位置，因为页面元素的其余部分不需要在修复后被replace，所以更好。 任何人都知道如何与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>
不要下面的基本方法不足以满足您的要求？
具有div的HTML代码
<div id="mydiv" onscroll='myMethod();'>
JS会有下面的代码
function myMethod(){ alert(1); }
