vue实现滚动到具体某元素位置
本文于 398 天之前发表，文中内容可能已经过时。
1
| scrollIntoView({ behavior:"smooth", block: "start", inline: "start"})
|
behavior 表示滚动方式。auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth表示 直接滚到底 和 使用平滑滚动。
block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb来说，就是竖直方向。start 表示将视口的顶部和元素顶部对齐；center表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb来说，就是水平方向。其值与 block 类似。
1
2
3
4
5
6
7
| {
behavior: "auto" | "instant" | "smooth",
block: "start" | "center" | "end" | "nearest",
inline: "start" | "center" | "end" | "nearest",
}
|
二、案例
vue 单文件运行 vue serve + 文件名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <template>
<div class="content" ref="scrollDiv">
<div class="go" @click="go">点击下滑</div>
<h1 class="show" id="show" ref="view">展示</h1>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
go () {
// 方法1：
// document.getElementById('show').scrollIntoView({ behavior: 'smooth' })
// 方法2
this.$refs.view.scrollIntoView({ behavior: 'smooth' })
}
}
}
</script>
<style lang='less' scoped>
.go {
border: 1px solid #f40;
width: 120px;
text-align: center;
}
.content {
padding: 10px 50px;
}
.show {
margin-top: 3000px;
background: #f40;
color: #fff;
}
</style>
|
