【VUE】设置滚动条,按固定距离滚动
Html<div@scroll="mouseScroll('elForm')"></div>CSSscroll {max-height: 210px;overflow-y: scroll;&::-webkit-scrollbar {width: 4px;height: 40px;}&::-we.
·
- Html
<div @scroll="mouseScroll('elForm')"></div>
- CSS
scroll {
max-height: 210px;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 4px;
height: 40px;
}
&::-webkit-scrollbar-thumb {
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #6b8ff7;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
border-radius: 2px;
background: #d4dcf2;
}
}
- function
data() {
return {
showScrollTop: 0
}
},
methods: {
// 鼠标滚动事件
mouseScroll(item) {
const vm = this;
if (this.$refs[item].scrollTop === vm.showScrollTop) {
return false;
} else if (this.$refs[item].scrollTop > vm.showScrollTop) {
vm.showScrollTop = vm.showScrollTop + 43;
this.$refs[item].scrollTop = vm.showScrollTop;
} else if (this.$refs[item].scrollTop < vm.showScrollTop) {
vm.showScrollTop = vm.showScrollTop - 43;
this.$refs[item].scrollTop = vm.showScrollTop;
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)