如何解決JavaScript動(dòng)態(tài)設(shè)置元素為fixed時(shí)導(dǎo)致的頁面抖動(dòng)問題？

JavaScript動(dòng)態(tài)設(shè)置元素fixed屬性引發(fā)的頁面抖動(dòng)及解決方案

在使用JavaScript動(dòng)態(tài)將元素定位設(shè)置為fixed時(shí)，可能會(huì)遇到頁面抖動(dòng)的問題。本文將分析原因并提供有效的解決方案。

問題描述

當(dāng)頁面滾動(dòng)事件觸發(fā)，并根據(jù)特定條件將元素設(shè)置為fixed定位時(shí)，該元素可能出現(xiàn)抖動(dòng)現(xiàn)象。 以下代碼片段展示了可能導(dǎo)致此問題的場(chǎng)景：

window.addEventListener('scroll', this.handleTabFix, true);  handleTabFix() {   let timeOut = null;   clearTimeout(timeOut);   timeOut = setTimeout(() => {     let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;     let offsetTop = document.querySelector('#testNavBar') && document.querySelector('#testNavBar').offsetTop + 60;     scrollTop > offsetTop ? this.isFixTab = true : this.isFixTab = false;     // this.isFixTab為true時(shí)，設(shè)置元素為fixed   }, 1000); }

問題根源

抖動(dòng)現(xiàn)象通常源于元素fixed定位后，頁面高度發(fā)生變化，觸發(fā)頁面重新渲染。 fixed定位元素脫離文檔流，導(dǎo)致頁面高度減小，可能隱藏滾動(dòng)條，進(jìn)而觸發(fā)元素fixed狀態(tài)的改變，頁面高度反復(fù)變化，最終造成抖動(dòng)。

解決方案

以下兩種方法可以有效解決此問題：

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

1. 使用position: sticky: sticky定位結(jié)合了relative和fixed的特性。元素在滾動(dòng)到特定位置前保持relative定位，滾動(dòng)到該位置后則變?yōu)閒ixed，且不會(huì)影響頁面高度。這避免了fixed定位帶來的布局變化，從而消除抖動(dòng)。

2. 使用包裹元素保持高度: 在需要設(shè)置為fixed的元素外添加一個(gè)容器元素，并為該容器設(shè)置固定高度。當(dāng)內(nèi)層元素設(shè)置為fixed時(shí)，外層容器保持原有高度，防止頁面布局變化，從而解決抖動(dòng)問題。

通過以上方法，可以有效避免JavaScript動(dòng)態(tài)設(shè)置元素fixed定位時(shí)產(chǎn)生的頁面抖動(dòng)。