[web教学] 给div设置滚动条(css)

[复制链接]
查看621 | 回复0 | 2023-8-23 11:50:50 | 显示全部楼层 |阅读模式 来自 中国北京
1、
overflow:hidden;
overflow:scroll;

2、
如果要出现程度滚动条,则: overflow-x:auto
如果要垂直滚动条则为: overflow-y:auto
留意:肯定要设置宽高
width:400px; height:400px;

3、纯色滚动条
  1. /* 整个滚动条 */
  2. ::-webkit-scrollbar {
  3.     /* 对应纵向滚动条的宽度 */
  4.     width: 10px;
  5.     /* 对应横向滚动条的宽度 */
  6.     height: 10px;
  7. }
  8. /* 滚动条上的滚动滑块 */
  9. ::-webkit-scrollbar-thumb {
  10.     background-color: #49b1f5;
  11.     border-radius: 32px;
  12. }
  13. /* 滚动条轨道 */
  14. ::-webkit-scrollbar-track {
  15.     background-color: #dbeffd;
  16.     border-radius: 32px;
  17. }
复制代码
4、花色滚动条
  1. /* 整个滚动条 */
  2. ::-webkit-scrollbar {
  3.     width: 10px;
  4.     height: 10px;
  5. }
  6. /* 滚动条上的滚动滑块 */
  7. ::-webkit-scrollbar-thumb {
  8.     background-color: #49b1f5;
  9.     /* 关键代码 */
  10.     background-image: -webkit-linear-gradient(45deg,
  11.             rgba(255, 255, 255, 0.4) 25%,
  12.             transparent 25%,
  13.             transparent 50%,
  14.             rgba(255, 255, 255, 0.4) 50%,
  15.             rgba(255, 255, 255, 0.4) 75%,
  16.             transparent 75%,
  17.             transparent);
  18.     border-radius: 32px;
  19. }
  20. /* 滚动条轨道 */
  21. ::-webkit-scrollbar-track {
  22.     background-color: #dbeffd;
  23.     border-radius: 32px;
  24. }
复制代码

参考链接:
http://t.csdn.cn/mTtW9

来源:https://blog.csdn.net/qq_66061193/article/details/130060321
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则