怎么给选中浏览器的滚动条的dom节点？

Z时代
2024-02-19
分类：IT

需求是：划过滚动条，增加滚动条的宽度，划出时，恢复css默认设置的宽。

问题是：我不知道怎么拿到浏览器的滚动条的dom，给他添加划入划出事件。目前是给页面加了划入划出，但那样的话在打开el-select的下拉框的时候，会出现屏幕抖动。

所以还是要给滚动条加，或者说，不用移入移出事件，还有什么办法能实现这个需求吗

回答：

多的不说了，这个是整个滚动条的样式配置：
https://zhuanlan.zhihu.com/p/451280260

// 滑块样式
::-webkit-scrollbar-thumb

回答：

::-webkit-scrollbar{
    height: 9px;
    width: 9px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border-style: dashed;
    border-color: transparent;
    border-width: 2px;
    background-color: rgba(157, 165, 183, 0.4);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 165, 183, 0.7);}

这文章提到: https://github.com/wqhui/blog/issues/7
background-clip: padding-box，设置该属性后背景延伸至内边距（padding）外沿，不会绘制到边框处，也就是说设置该属性后，背景将被限制在内容和边距之内，边框背景不会改变。

怎么给选中浏览器的滚动条的dom节点？