滾動事件監聽器javascript

當用戶滾動某個可以使用的文本框時，是否有js監聽器？有點像滾動除了onclick。我看到HTML5 event listener for number input scroll - Chrome only，但似乎只用於鉻。我正在尋找一些跨瀏覽器的東西。滾動事件監聽器javascript

來源

2012-09-21 Kpower

'如果（jQueryIsAllowed）'http://api.jquery.com/scroll/ – Whymarrh

對於那些發現此問題希望找到一個不涉及jQuery的答案的人，請使用正常事件偵聽來掛入window「scroll」事件。說，我們要聽滾動增加了一些CSS選擇器能夠要素：

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

獎勵積分，你可以給滾動處理器的鎖定機構，因此如果我們已經不運行滾動：

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

來源

2013-08-30 21:38:11

只是好奇 - 如果它的事項不能確定 - 但應該將useCapture返回滾動事件偵聽器或真或假？ – beefchimi

沒關係 - 設置'useCapture'是一種確保處理程序在任何處理程序由於冒泡而發生事件觸發之前觸發的方法，或者通過不設置'useCapture'來設置「我不關心它被調用的順序」。但是，這並不是很有用，因爲在使用'useCapture = true'的多個偵聽器時，不存在調用順序保證。 –

很乾淨，但是這不會消除滾動性能，因爲我們通過我們正在選擇的許多元素來添加滾動偵聽器？我想我們會想集中在Scroll邏輯上，這樣我們就可以管理執行的內容。你有什麼發現？ – gdbj

不是下面的基本方法不能滿足您的要求嗎？有一個div

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

HTML代碼將下面的代碼

function myMethod(){ alert(1); }

來源

2013-10-22 10:13:41 Satya

在狹義的意義上，這是一個「函數」，而不是「方法」:-) –

它取決於'myMethod'是否是全局的 - 'window.myMethod';）。 – maximedupre

我一直在尋找很多找到與老同學JS sticy menue溶液（不JQuery的）。所以我建立一個小測試來玩它。我認爲這對於那些在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>

來源

2015-05-06 07:24:51 Naomi

滾動事件監聽器javascript

回答

相關問題