滾動使用JavaScript方法

HTML滾動使用JavaScript方法

<section id="imag" class = "paral-1 image-contain">   
</section>

的JavaScript

var g = 0; 
    //var myImage = document.getElementById("imag"); 
    window.addEventListener('scroll', pageScrolled); 

    function pageScrolled() { 
     g = g + 10; 
     document.getElementById("imag").style.top = -g+"px" ; 
    }

一，功能應該在滾動但是當頁面加載它被稱爲被調用。
二，當我滾動功能應該更新變量「g」10，但它增加了100。這是什麼奇怪的beahviour。您可以打開控制檯並檢查。這裏的小提琴 - https://jsfiddle.net/LuLt0mh0/

來源

2016-05-12 Shah Rukh K

如果文檔滾動負載（因爲錨例如，或者如果頁面已經被滾動的重裝）
對於這樣只會發生每個已發生scroll事件g增加10。但是這是一個繼續事件，它在滾動時被多次觸發。

添加console.log(g)到pageScrolled會顯示該則增加10多次： jsfiddle.net/LuLt0mh0/1

詳情請參閱MDN scroll：

[...]由於滾動事件可以火災發生率高，事件處理程序不應執行計算昂貴的操作，如DOM 修改。[...]

來源

2016-05-12 07:46:22

我們可以控制這種滾動行爲，因爲如果我要申請上滾動的任何功能，它可能是一個災難..蔭嘗試添加視差滾動 –

@ShahRukhK你不應該增加值由分步對於每一個被觸發的事件都是固定的值，對於經典的拖動，你可以使用類似於MDN頁面上顯示的'Scroll optimization with window.requestAnimationFrame'這樣的值將值與scroll-offset綁定。或者取決於您希望在達到特定滾動偏移量時開始平滑動畫的效果。但是，因爲你沒有提到你想達到的效果，所以無法說清楚。 –

你有2個問題，以下行：

document.getElementById("imag").style.top = -g + "px";

每一次滾動事件發生時，該行執行 - 其結果是通過x10px #imagtop下降。當然，什麼都沒有發生的原因是因爲...
#imag有沒有position財產分配給它。爲了讓top能夠正常工作，如果元素有position: relative, absolute, or fixed.但是，即使您確實已更正此錯誤，該行代碼將會驅動您的#imag離開您的視口，永不會再次看到，並且會繼續向北，直到您刷新頁面。

來源

2016-05-12 08:04:59 zer00ne

滾動使用JavaScript方法

回答

相關問題