vue div 滚动条,vue中怎么设置滚动条显示
滚动条可以给用户带来极佳的体验效果。今天给大家分享一个用vue做的滚动条样式。代码简单易懂。有需要的朋友可以参考一下。
一开始想修改浏览器滚动条样式来达到效果。
但是查阅资料后不能修改浏览器滚动条的宽度和位置。
没办法，只能自己写了。
首先是滚动条样式。
div class= scroll bar v-if= role list . length 5
差异
class=box
@mousedown=move
v-bind:style= { width:active width px }
/div
/div
模式。滚动条{
宽度：500px
高度：6px
背景：# d5dbf5
边距：0自动；
边距-顶部：72px
边框-半径：4px
位置：相对；方框{
宽度：30px
身高：100%；
背景：# fff
边框-半径：4px
位置：绝对；
左：0；
}。框：悬停{
光标：指针；
}
}
滚动区的样式这里不写了。
1是滚动条滑块的宽度。
已安装(){
//滚动区的宽度。我这里有一个遍历用户的列表，所以我得到了列表的长度，每个li的宽度就是总宽度。
设bgWidth=this。$ refs . lilist . client width * this . rolelist . length；
//可视区域宽度1065这是上图中白色背景框的宽度。
//滑块宽度500是滚动条的宽度。这个宽度被计算以获得滑块可以滑动的距离，这将在下面描述。
this . active width=500 *(1065/BG width)；
},
2向滑块添加鼠标事件
移动(e) {
//获取目标元素
设odiv=e.target
//scrollarrea
//计算出鼠标相对于元素的位置
let disX=e . clientx-odiv . offset left；
//滚动条可以滚动的距离。
设view area=500-this . active width；
//滚动区域宽度
设bgWidth=this。$ refs . lilist . client width * this . rolelist . length；
document.onmousemove=(e)={
//鼠标按下移动事件
//用鼠标位置减去鼠标相对于元素的位置，得到元素的位置。
let left=e . clientx-disX；
//left 0表示滑块已经到达最左侧。
//或者左视图区域意味着滑块在最右边。
if (left 0 left viewArea) {
//console.log(是结尾)；
//此时清除事件，否则滑块将绘制滚动条区域。
document.onmousemove=null
}否则{
//滑块的滑动距离
odiv . style . left=left px ；
//滚动区滑动距离=滚动区宽度*(滑块滑动距离/500)
这个。$参考文献。scroll larea . style . left=
- BG width * left/500 px ；
}
};
document.onmouseup=(e)={
document.onmousemove=null
document.onmouseup=null
};
},
这就是这篇关于vue实现滚动条样式的文章。有关vue实现滚动条的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。