情况一：
1.要求：div内容超出自动滚动，鼠标进入停止滚动
2.效果：
3.代码（vue）
<template>
<div class='container'>
<div ref="contentRef" class="content">
<div v-for="item in 20" :key="item" class="contentItem">{{item}}</div>
</div>
</div>
</template>
<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
data () {
return {
timer: undefined
}
},
mounted () {
this.initDiv()
},
methods: {
initDiv () {
const self = this
const setInter = function () {
if (self.$refs.contentRef.scrollTop === self.$refs.contentRef.scrollHeight - self.$refs.contentRef.clientHeight) {
self.$refs.contentRef.scrollTop = 0
} else {
self.$refs.contentRef.scrollTop++
}
}
self.timer && clearInterval(self.timer)
self.timer = setInterval(setInter, 100)
this.$refs.contentRef.addEventListener('mouseover', function () {
self.timer && clearInterval(self.timer)
})
this.$refs.contentRef.addEventListener('mouseout', function () {
self.timer = setInterval(setInter, 100)
})
}
}
})
</script>
<style scoped lang='scss'>
.content{
margin-top:100px;
height: 300px;
width:300px;
border:1px solid #f0f0f0;
overflow: scroll;
.contentItem{
margin:10px 0;
background-color: #f0f0f0;
line-height:50px;
text-align: center;
cursor: pointer;
}
}
</style>情况二:
1.要求：只要求div内容超出自动滚动
2.效果图：
3.代码
<template>
<div class='container'>
<div class="divScroll">
<div ref="contentRef" class="content">
<div v-for="item in 10" :key="item" class="contentItem">{{item}}</div>
</div>
</div>
</div>
</template>
<script lang='ts'>
import Vue from 'vue'
export default Vue.extend({
data () {
return {
}
},
methods: {
}
})
</script>
<style scoped lang='scss'>
.divScroll{
margin-top:100px;
height: 300px;
overflow: scroll;
}
.content{
width:300px;
border:1px solid #f0f0f0;
animation: divScroll 4s linear infinite;
.contentItem{
margin:10px 0;
background-color: #f0f0f0;
line-height:50px;
text-align: center;
}
}
@keyframes divScroll {
0%{
transform:translateY(0px)
}
100%{
transform: translateY(calc(-100% + 300px));
}
}
</style>