scrollIntoView()
scrollIntoView()
方法将调用它的元素滚动到浏览器窗口的可见区域。
- element.scrollIntoView(); // 等同于element.scrollIntoView(true)
- element.scrollIntoView(alignToTop); //布尔参数。接受布尔值主要还是为了兼容不支持平滑滚动(老版)的浏览器
- element.scrollIntoView(scrollIntoViewOptions); //对象参数
alignToTop
- 当传入参数
true
时,相当于{behavior: 'auto', block: 'start', inline: 'nearest'}
- 当传入参数
false
时,相当于{behavior: 'auto', block: 'end', inline: 'nearest'}
当未传入参数时,默认值为:
{behavior: 'auto', block: 'start', inline: 'nearest'}
scrollIntoViewOptions,一个包含下列属性的对象。
-
behavior
定义过渡动画,默认值为auto
。auto
,表示没有平滑的滚动动画效果。smooth
,表示有平滑的滚动动画效果。
-
block
定义垂直方向的对齐,默认值为start
。start
,表示顶端
对齐。center
,表示中间
对齐。end
,表示底端
对齐。-
nearest
:- 如果元素完全在视口内,则垂直方向不发生滚动。
- 如果元素未能完全在视口内,则根据最短滚动距离原则,垂直方向滚动父级容器,使元素完全在视口内。
-
inline
定义水平方向的对齐,默认值为nearest
。start
,表示左端
对齐。center
,表示中间
对齐。end
,表示右端
对齐。-
nearest
:- 如果元素完全在视口内,则水平方向不发生滚动。
- 如果元素未能完全在视口内,则根据最短滚动距离原则,水平方向滚动父级容器,使元素完全在视口内。
效果图:
示例代码:
<template>
<div class="box">
<div class="left">
<p @click="test('id1')">第一段内容</p>
<p @click="test('id2')">第二段内容</p>
<p @click="test('id3')">第三段内容</p>
</div>
<div class="right">
<div class="content" id="id1">我是第一段内容</div>
<div class="content" id="id2">我是第二段内容</div>
<div class="content" id="id3">我是第三段内容</div>
</div>
</div>
</template>
<script setup lang="ts">
const test = (data: any) => {
document?.getElementById(data)?.scrollIntoView({
behavior: "smooth", //smooth:平滑,auto:直接定位
block: "start",
inline: "start",
});
};
</script>
<style scoped lang="scss">
.box {
width: 50vw;
height: 50vh;
display: flex;
overflow: hidden;
border: 1px solid gray;
.left {
width: 100px;
height: 100%;
border-right: 2px solid gray;
p {
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid #ccc;
}
}
.right {
flex: auto;
overflow: auto;
.content {
width: 100%;
height: 1000px;
border-top: 2px solid blue;
padding: 20px;
box-sizing: border-box;
}
}
}
</style>
a标签锚点定位
无平滑效果。需要平滑的话用上面的方式
<template>
<div class="box">
<div class="left">
<a href="#id1">第一段内容</a>
<a href="#id2">第二段内容</a>
<a href="#id3">第三段内容</a>
</div>
<div class="right">
<div class="content" id="id1">我是第一段内容</div>
<div class="content" id="id2">我是第二段内容</div>
<div class="content" id="id3">我是第三段内容</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.box {
width: 50vw;
height: 50vh;
display: flex;
overflow: hidden;
border: 1px solid gray;
scroll-behavior: smooth;
.left {
width: 100px;
height: 100%;
border-right: 2px solid gray;
a {
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid #ccc;
}
}
.right {
flex: auto;
overflow: auto;
.content {
width: 100%;
height: 1000px;
border-top: 2px solid blue;
padding: 20px;
box-sizing: border-box;
}
}
}
</style>