滚动事件监听器javascript

Question

滚动事件监听器javascript

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

Answer 1

对于那些发现这个问题的人希望找到一个不涉及jQuery的答案,你可以window使用正常的事件监听来挂钩"滚动"事件.假设我们想要添加滚动监听许多支持CSS-selector的元素:

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

非常干净，但是这不会影响滚动性能吗，因为我们在滚动上添加了一个监听器，无论我们选择多少个元素？我认为我们希望集中 onScroll 逻辑，以便我们可以管理执行的内容。你发现了什么？ (2认同)

Answer 2

Sat*_*tya 5

下面的基本方法不能满足您的要求吗？

具有 div 的 HTML 代码

<div id="mydiv" onscroll='myMethod();'>

Run Code Online (Sandbox Code Playgroud)

JS会有下面的代码

function myMethod(){ alert(1); }

Run Code Online (Sandbox Code Playgroud)

从狭义上讲，这是一个“函数”，而不是一个“方法”:-) (5认同)
这取决于 `myMethod` 是否是全局的 - `window.myMethod` ;)。 (3认同)

Answer 3

Nao*_*man 5

我正在寻找一个与旧学校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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，5 月前
查看次数：	137061 次
最近记录：	6 年，10 月前