博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何自定义滚动条?
阅读量:4677 次
发布时间:2019-06-09

本文共 912 字,大约阅读时间需要 3 分钟。

滚动条的自定义化,往往在做移动web的时候,能为我们的项目增添不少风采,而且通过为其添加-webkit-overflow-scrolling : touch;  的css属性,使其有着如同ios系统浏览器中bounce的效果,这里的话,提供一个仿ios风格自定义滚动条的demo,代码如下:

1  2      3         自定义滚动条 4         
5 32 33 34
35
36
37 #scrollbar{38 width:200px;39 height:200px;40 margin:100px auto;41 border: 1px #eee solid;42 background-color:#eee;43 display:inline-block;44 }45 /*凹槽宽度*/46 #scrollbar::-webkit-scrollbar{47 width:8px;48 height:8px;49 }50 /*拖动条*/51 #scrollbar::-webkit-scrollbar-thumb{52 background-color:ragb(0,0,0,0.3);53 border-radius:6px;54 }55 /*背景槽*/56 #scrollbar::-webkit-scrollbar-track{57 background-color:#ddd;58 border-radius:6px;59 }60 
61
62
63
64
65 66

效果如下:

主要使用的是::-webkit-scrollbar(凹槽),::-webkit-scrollbar-thumb(拖动块),::-webkit-scrollbar-track(背景槽)的属性来定义滚动条,good,加个链接,忽略掉它,哈哈,!

转载于:https://www.cnblogs.com/wuxiaobin/p/4894846.html

你可能感兴趣的文章
how to control project
查看>>
转 python新手容易犯的6个错误
查看>>
第四节 -- 列表
查看>>
决策树
查看>>
团队作业
查看>>
如何避免在简单业务逻辑上面的细节上面出错
查看>>
大型网站高并发的架构演变图-摘自网络
查看>>
8丶运行及总结
查看>>
redis安装配置
查看>>
结对项目博客
查看>>
讨论记录:求大于一个时间段的最大平均积分,O(n)时间实现
查看>>
error) DENIED Redis is running in protected mode because protected mode is enabled报错
查看>>
CSS-16-margin值重叠问题
查看>>
selenium常用方法
查看>>
第二次作业
查看>>
ios 面试题
查看>>
MySQL教程(二)—— 关于在ACCESS中使用SQL语句
查看>>
实验4.1
查看>>
接口Interface
查看>>
bzoj 1651: [Usaco2006 Feb]Stall Reservations 专用牛棚【贪心+堆||差分】
查看>>