- 使用scrollIntoView方法
- 方法解讀
scrollIntoView是 HTML 元素（HTMLElement）的一個方法。當調用該方法時，它會嘗試將調用它的元素滾動到瀏覽器的可視區域內。這個方法特別適用于處理頁面上的滾動行為，比如讓用戶能夠快速定位到頁面的某個部分。-
?方法的語法
element.scrollIntoView(alignToTop);或者
element.scrollIntoView(options);參數解讀
-
alignToTop（布爾值）-
如果是
true，則元素的頂部會盡可能地與視口的頂部對齊。 -
如果是
false，則元素的底部會盡可能地與視口的底部對齊。 -
注意：這個參數是舊的用法，現在推薦使用
options對象。
-
-
options（對象）-
這是一個配置對象，用于更精細地控制滾動行為。它包含以下屬性：
-
behavior-
可選值：
-
"auto"：默認行為，滾動會立即發生，可能會導致頁面快速跳動。 -
"smooth"：滾動會以平滑的方式進行，用戶體驗更好。
-
-
-
block-
可選值：
-
"start"：元素的頂部會與視口的頂部對齊。 -
"center"：元素的中心會與視口的中心對齊。 -
"end"：元素的底部會與視口的底部對齊。 -
"nearest"：根據當前滾動位置，選擇最接近的對齊方式。
-
-
-
inline-
可選值：
-
"start"：元素的左邊界會與視口的左邊界對齊。 -
"center"：元素的中心會與視口的中心對齊。 -
"end"：元素的右邊界會與視口的右邊界對齊。 -
"nearest"：根據當前滾動位置，選擇最接近的對齊方式。
-
-
-
-
-
?示例代碼
示例1：使用布爾值參數
const element = document.getElementById("myElement"); element.scrollIntoView(true); // 將元素頂部與視口頂部對齊示例2：使用配置對象
const element = document.getElementById("myElement"); element.scrollIntoView({behavior: "smooth",block: "center",inline: "nearest" });瀏覽器兼容性
scrollIntoView方法在現代瀏覽器中得到了廣泛支持。不過，options參數的兼容性可能稍差一些，特別是在一些較舊的瀏覽器中。建議在使用時檢查瀏覽器的兼容性，或者使用一些 polyfill 來確保兼容性。5. 使用場景
-
頁面導航：在單頁應用（SPA）中，用戶點擊導航鏈接時，可以使用
scrollIntoView將目標內容滾動到可視區域。 -
表單驗證：當表單提交失敗時，可以將錯誤提示信息滾動到可視區域，方便用戶查看。
-
6. 注意事項
-
滾動范圍：如果元素已經處于可視區域內，
scrollIntoView可能不會有任何效果。 -
滾動容器：默認情況下，
scrollIntoView會滾動瀏覽器的視口。如果元素位于一個可滾動的容器內（如overflow: auto的div），則會滾動該容器。 -
性能問題：頻繁調用
scrollIntoView可能會導致性能問題，特別是在滾動行為比較復雜的情況下。建議合理控制調用頻率。 -
滾動到特定元素：在長頁面中，快速定位到用戶需要查看的內容。
-
vue示例代碼
<el-scrollbar ref="scrollbarRef"><div class="text-xs text-[#343A3F] flex w-full"><el-buttonclass="!h-5 !px-2 !py-0 !text-[10px] !text-[#343A3F] flex items-center !rounded-md"v-for="(item, index) in currentPageItems":key="index":class="{'!text-[#129bfe] !bg-[#CFEAFE] !border-transparent':selectedStageIndex === currentPage * pageSize + index,}"@click="handleStageSelect(currentPage * pageSize + index)">{{ item.stage }}</el-button></div></el-scrollbar><script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue';const scrollbarRef = ref(null); // 定義一個 ref 來引用 el-scrollbar// 在頁面加載時自動滾動到選中的 el-button 位置
onMounted(() => {nextTick(() => {nextTick(() => {// 確保 DOM 完全渲染后再執行滾動邏輯if (scrollbarRef.value && selectedStageIndex.value !== null) {const buttonIndex = selectedStageIndex.value % pageSize; // 計算當前選中的按鈕在當前頁的索引const buttonElement = scrollbarRef.value.$el.querySelector(`.el-button:nth-child(${buttonIndex + 1})`); // 獲取對應的按鈕元素if (buttonElement) {buttonElement.scrollIntoView({ behavior: 'auto', block: 'center' }); // 滾動到該按鈕位置}}});});
});
</script>#注釋
寫兩遍nextTick是等滾動條的中el-button元素全部加載完之后再執行scrollIntoView方法，如果寫一遍可能沒加載就執行了
具體寫幾個視代碼邏輯而定
