当前位置: 首页> 科技> 能源 > 滚动条样式

滚动条样式

时间:2025/7/11 15:10:02来源:https://blog.csdn.net/qq_34169240/article/details/139659283 浏览次数:0次


/*滚动条*/
//滚动条没有滑块的轨道部分.
::-webkit-scrollbar-track-piece {background: #fff;border-radius: 0px;opacity: 1;border: 1px solid #D9D9D9;
}
//整个滚动条
::-webkit-scrollbar {width: 8px;height: 8px;background-color: transparent;
}
//滚动条上的滚动滑块
::-webkit-scrollbar-thumb {cursor: pointer;background: #4ab5a5;border-radius: 10px;width: 8px;border: none;//border-left: 1px solid #E1E2E8;//border-right: 1px solid #E1E2E8;transition: 0.3s ease-in-out;
}
//滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-button{cursor: pointer;display: flex; /*设置flex 否则垂直方向按钮 会出现2个*/width: 8px !important;height: 8px !important;background: #D9D9D9;/*水平滚动条按钮*/&:horizontal{&:start{background-image: url(~@/assets/images/scrollbar/arrow-left.png);background-size: cover; /* 确保图标覆盖整个按钮 */background-repeat: no-repeat; /* 确保图标不重复 */background-position: center; /* 确保图标在按钮中居中 */}&:end{background-image: url(~@/assets/images/scrollbar/arrow-right.png);background-size: cover; /* 确保图标覆盖整个按钮 */background-repeat: no-repeat; /* 确保图标不重复 */background-position: center; /* 确保图标在按钮中居中 */}}/*垂直滚动条按钮*/&:vertical{&:start:decrement{background-image: url(~@/assets/images/scrollbar/arrow-top.png);background-size: cover; /* 确保图标覆盖整个按钮 */background-repeat: no-repeat; /* 确保图标不重复 */background-position: center; /* 确保图标在按钮中居中 */}&:end{background-image: url(~@/assets/images/scrollbar/arrow-bottom.png);background-size: cover; /* 确保图标覆盖整个按钮 */background-repeat: no-repeat; /* 确保图标不重复 */background-position: center; /* 确保图标在按钮中居中 */}}
}

关键字:滚动条样式

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: