- 使用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-button
class="!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方法，如果写一遍可能没加载就执行了
具体写几个视代码逻辑而定