javascript scroll 高度偵測

javascript angular

Zaku 2018-11-21 17:05:54 ‧ 3575 瀏覽

分享至

請問一下scroll到特定位置後，觸發特定事件的效果，寫法大概有什麼策略。
目前有找到的是單一節點處發的套件，無限載入，但效果不太相同，是接近或到底部時在innerHTML新的資料近來，若要再綁定動畫效果會有點麻煩，效果也不太相容。

scroll到特定位置偵測，是已經載入完整頁面，到定點時再觸發事件。

問題大概是
(1)要怎麼偵測滾動到的位置
(2)自己換算位置?如果要，前提是偵測出來的單位要是px或可以轉換的單位，印象中之前用某個function測試的時候打出來的不是px為單位。
假定有三個區塊，必須先算出三個區塊的高度，假設是100px + 150px + 200px，
那促發點就是在滾動到100px, 250px, 450px時觸發，但版面一改整個參數都要改，也需線設計好指定高度，不知道是不是有其他方式，還是大致上就是如此

看更多先前的討論...收起先前的討論...

Luis-Chen iT邦新手 4 級 ‧ 2018-11-21 17:41:08 檢舉

https://www.w3schools.com/js/js_window_screen.asp

froce iT邦大師 1 級 ‧ 2018-11-22 07:40:53 檢舉

https://stackoverflow.com/questions/7182342/how-to-detect-when-the-user-has-scrolled-to-a-certain-area-on-the-page-using-jqu

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2018-11-22 10:06:50 檢舉

只給你幾個關鍵字讓你去研究。或是看看上面兩個人的程式碼也可以。
scrollTop、height、offset、resize

Zaku iT邦新手 3 級 ‧ 2018-11-22 18:16:56 檢舉

jquery比較好找，angular搞不定..

froce iT邦大師 1 級 ‧ 2018-11-23 08:54:49 檢舉

原理都一樣啊，不過是說這種框架現在都用到虛擬DOM的概念，不太容易直接操作DOM

Zaku iT邦新手 3 級 ‧ 2018-11-26 10:52:08 檢舉

恩不知怎麼操作參數不太一樣的樣子，大大提供的關鍵在
1. $(document).on('scroll', function() {
這個可以
2.$(this).scrollTop()
3.$('#theTarget').position().top
這兩個還不知道怎麼弄，參數跟單位好像都不太相同

登入發表討論