<template>
<div id="app">
<ul class="menu">
<li @click="scrollTo(0, 0)">item 1</li>
<li @click="scrollToEl('c-2')">item 2</li>
<li @click="scrollToEl('c-3')">item 3</li>
<li @click="scrollToEl('c-4')">item 4</li>
</ul>
<div
class="wrapper"
ref="wrapScroll"
>
<div class="content">
<div class="c-1">content 1</div>
<div class="c-2">content 2</div>
<div class="c-3">content 3</div>
<div class="c-4">content 4</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from "better-scroll";
export default {
name: "app",
data() {
return {
wrapScroll: {} //滚动容器对象
};
},
methods: {
//初始化滚动
initScroll() {
this.wrapScroll = new BScroll(this.$refs.wrapScroll);
},
//滚动到指定距离
scrollTo(x, y) {
this.wrapScroll.scrollTo(x, y, 300);
},
//滚动到指定元素
scrollToEl(el) {
//根据class获取dom元素
let element = this.$refs.wrapScroll.getElementsByClassName(el)[0];
this.wrapScroll.scrollToElement(element, 300);
}
},
created() {
//渲染dom后初始化滚动
this.$nextTick(() => {
this.initScroll();
});
}
};
</script>
<style>
.menu {
position: fixed;
width: 200px;
background-color: #eee;
}
.wrapper {
width: 600px;
height: 600px;
margin-left: 300px;
background-color: #999;
overflow: hidden;
}
.content > div {
height: 500px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
</style>