操作滚动条方法
window.scroll(x,y)
是让window滚动条滚动到那个x,y坐标。//x是水平坐标,y是垂直坐标。
window.scrollBy(-x,-y)
是让window滚动条相对滚动到某个坐标,- 10即相对向左/向上滚动10像素。
window.scrollTo(x,y)
和window.scroll(x,y)
一样。
<template>
<div class="scroll-outside">
<div class="scroll-inside">123456789123456789123456789</div>
</div>
</template>
/**
* 页面启动执行
*/
public mounted(): void {
this.scrollOperation()
}
/**
* 滚动
*/
public scrollOperation(): void {
const outside: any = document.getElementsByClassName('scroll-outside')[0]
let x = 0
setInterval(() => {
if (x === 100) {
x = 0
outside.scrollBy(-100, 0) // window.scrollBy(-x,-y)是让滚动条相对滚动到某个坐标,- 10即相对向左/向上滚动10像素。
}
x += 1
outside.scrollBy(1, 0)
}, 20)
},
// style
.scroll-outside {
overflow-x: scroll;
width: 150px;
.scroll-inside {
width: auto;
}
}
div::-webkit-scrollbar {
//display: none //隐藏滚动条
}