js滾動及可視區域的相關的操作
阿新 • • 發佈:2018-05-30
eight 可能 ins TP sof ron family client 祖先 window.requestAnimationFrame
element.getBoundingClientRect
判斷指定元素相對於頁面可視窗口的位置信息,通常結合windows.onScroll方法使用,當element.getBoundingClientRect.Top<=document.documentElement.clientHeight時表示該元素在可視範圍內。
詳細介紹
IntersectionObserver對象
異步監聽目標元素與其祖先或視窗的位置信息,通常用於替代element.getBoundingClientRect+window.scroll的方案。
詳細介紹
window.requestAnimationFrame
將多個可能會導致回流或重繪的操作放在一起一次性執行,避免滾動或操作頁面時頁面出現卡頓和空白,該方法免除了開發者自己編寫“函數防抖”或“函數節流”的麻煩。
詳細介紹
“函數防抖”或“函數節流”介紹
element.scrollIntoViewIfNeeded(opt_center)
把某個元素滾動到可視區域,例如手機頁面底部的表單輸入框獲取焦點時,軟鍵盤會遮擋元素。這時就應該使用該特性。
DocumentFragment對象
DocumentFragment
接口表示一個沒有父級文件的最小文檔對象,它不是真實 DOM 樹的其中一部分,它的變化不會引起 DOM 樹的重新渲染操作(reflow) ,因此不會導致性能問題。
當我們需要對dom進行頻繁的寫入操作時,可以用document.createDocumentFragment()創建一個對象
,在此對象上進行添加(append)或被插入(inserted)操作,然後再插入真實的dom節點。因為所有的節點會被一次性
插入到文檔中,而這個操作僅發生一個重渲染
的操作,可以大大提高性能。
詳細介紹
js滾動及可視區域的相關的操作