场景
一页显示40条,超出屏幕滚动,切页面时,滚动到顶部
代码
<template>
<el-row class="card-scroll">
<div class="flex-warp" ref="scrollView">
<!-- 内容 -->
</div>
</el-row>
</template>
<script setup>
const scrollView = ref(null)
scrollView.value.scrollIntoView({ behavior: 'smooth', block: 'start' })
</script>
.card-scroll{
height: calc(70vh);
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px; /* 设置滚动条宽度为10像素 */
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.2); /* 设置滚动条滑块的背景色为#888 */
border-radius: 5px; /* 设置滚动条滑块的边角半径为5像素 */
}
}
btw,滚动到页面顶部
window.scrollTo({ top: 0, behavior: 'smooth' })