需求：
1.列表自动滚动;
2.到底回到原点重新滚;
3.可以用滑轮滚;
4.鼠标hover时停止滚动，挪走鼠标后接着滚；
5.不同浏览器的滚轮样式设置不同，IE和火狐需要额外关注一下下。。。。。
因为是动图就不展示了哈哈哈哈哈哈哈哈哈总之相信我！它能用~
组件代码 ↓
<template>
<!--
created by niujinxi at 20220317
In your page,you set a container,give an id and set height when you use this component.
And if you want to change scrollbar's style,just change .scrollContainer's style in your page.That's all..
-->
<div class="scrollContainer" :id="id" @mouseenter="monseenter" @mouseleave="mouseleave">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'ScrollList',
props: {
id: String
},
data() {
return {
timer: null
};
},
methods: {
init() {
this.setTimer();
// this.$once代表只执行一次。如果组件是在keep-alive中包裹，则需要更换函数
// 被keep-alive包裹住的组件有两个生命周期函数：activated和deactivated
this.$once('hook:beforeDestroy', () => {
this.removeTimer();
});
},
removeTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
setTimer() {
this.removeTimer();
this.timer = setInterval(() => {
// pixel height：include el and padding read only
const scrollHeight = document.getElementById(this.id).scrollHeight;
// visible area height：include el and padding read only
const clientHeight = document.getElementById(this.id).clientHeight;
const heightDifference = scrollHeight - clientHeight;
// scroll height：readable and writable
document.getElementById(this.id).scrollTop++;
// when el scroll to top
if (document.getElementById(this.id).scrollTop >= heightDifference - 1) {
this.removeTimer();
// make it go back to original location after one second
setTimeout(() => {
document.getElementById(this.id).scrollTop = 0;
this.setTimer();
}, 1000);
}
}, 44);
},
monseenter() {
this.removeTimer();
},
mouseleave() {
this.setTimer();
}
},
mounted() {
this.init();
}
};
</script>
<style lang="scss" scoped>
.scrollContainer::-webkit-scrollbar {
width: 4px;
background: aliceblue;
}
.scrollContainer::-webkit-scrollbar-thumb {
background: palevioletred;
border-radius: 5px;
}
.scrollContainer {
height: 100%;
overflow: scroll;
overflow-x: hidden;
}
// 兼容IE
.scrollContainer {
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color: #0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
</style>
使用页面代码 ↓
<template>
<div class="scroll-container" id="scrollContainer">
<Scroll :id="'service'">
<template>
<div v-for="(item,idx) in scrollListData" :key="idx + 'n'" class="service" @click="rowClick(item)">
{{item.title}}
</div>
</template>
</Scroll>
</div>
</template>
<script>
import Scroll from "@/components/page/ScrollList";
export default {
name: 'TestPage',
components: {
Scroll
},
data() {
return {
scrollListData: [1,2,3,4,5,6,7,8,9,1,2,3,,4,3,,2]
};
},
methods: {
rowClick(row) {
console.log(row,'row ==================')
}
},
};
</script>
<style lang="scss" scoped>
.scroll-container {
height: 200px;
width: 200px;
margin-bottom: 20px;
}
.service {
font-size: 12px;
line-height: 18px;
cursor: pointer;
}
</style>
