CSS设置滚动条样式(兼容IE)
2017-05-18 16:33
579 查看
废话不多说,直接上demo,最下面有详细注释。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201709/a003bf2251cd0e0d60fad17a14cc5dcd)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201709/a3fd0fc6ff2cb2d9927603fdf4cb79a4)
(个人比较喜欢简约点的)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201709/be4f8dbd53eb746e3ba88aa7ffcb1f15)
下面是代码:
简约版 (IE样式直接默认就行)
webkit浏览器滚动条样式设置位置参考如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201709/a41541c97e30748bd6c41589641b48e6)
IE浏览器滚动条样式设置位置参考如下图
![](https://oscdn.geek-share.com/Uploads/Images/Content/201709/d222d085d4a2174a7ffeb25090f4d78a)
1、这是在webkit浏览器下显示的样式。
(个人比较喜欢简约点的)
2、在IE浏览器下显示的样式(为了区分所以样式写的不一样,我没找到IE下设置滚动条宽高的方法)
下面是代码:
<div id='scroll'> <div > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia ab aliquid facere architecto culpa dolorum fugit corrupti harum accusantium quisquam inventore et magnam itaque minima hic! Impedit error.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt quia ipsam totam tenetur maxime repellendus possimus debitis molestiae velit vel fugiat ullam excepturi est quisquam quo fugit culpa amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur facilis ipsam iste repellat sint numquam explicabo voluptatum voluptate corporis fugit adipisci qui exercitationem corrupti debitis tempore omnis maxime at quidem!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatem dolores ab dolorem est itaque ut sit deserunt qui laudantium eaque vitae perspiciatis amet quasi unde inventore dolor quis. Natus!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia doloremque blanditiis quas unde nostrum a voluptatibus quam perspiciatis non quaerat enim neque quos rerum quo dolor expedita error deserunt!</p> </div> </div>
#scroll{ width:200px; height:200px; overflow:auto; margin-bottom: 20px; } #scroll div{ width:400px; height:400px; } #scroll::-webkit-scrollbar{/*滚动条整体部分,其中的属性有width,height,background,border等(就和一个块级元素一样)(位置1)*/ width:10px; height:10px; } #scroll::-webkit-scrollbar-button{/*滚动条两端的按钮,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置2)*/ background:#74D334; } #scroll::-webkit-scrollbar-track{/*外层轨道,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置3)*/ background:#FF66D5; } #scroll::-webkit-scrollbar-track-piece{/*内层轨道,滚动条中间部分(位置4)*/ background:#FF66D5; } #scroll::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分(位置5)*/ background:#FFA711; border-radius:4px; } #scroll::-webkit-scrollbar-corner {/*边角(位置6)*/ background:#82AFFF; } #scroll::-webkit-scrollbar-resizer {/*定义右下角拖动块的样式(位置7)*/ background:#FF0BEE; } #scroll{ scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/ scrollbar-face-color: #333; /**//*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/ }
简约版 (IE样式直接默认就行)
#scroll-2{ width:200px; height:200px; overflow:auto; margin-bottom: 20px; } #scroll-2 div{ width:400px; height:400px; } #scroll-2::-webkit-scrollbar{ width:4px; height:4px; } #scroll-2::-webkit-scrollbar-track{ background: #f6f6f6; border-radius:2px; } #scroll-2::-webkit-scrollbar-thumb{ background: #aaa; border-radius:2px; } #scroll-2::-webkit-scrollbar-thumb:hover{ background: #747474; } #scroll-2::-webkit-scrollbar-corner{ background: #f6f6f6; }
webkit浏览器滚动条样式设置位置参考如下:
IE浏览器滚动条样式设置位置参考如下图
相关文章推荐
- CSS设置滚动条样式(兼容IE)
- CSS设置滚动条样式(兼容IE)
- CSS:IE滚动条样式设置
- ie下滚动条样式设置
- 关于div设置最小高度,超过后自动增加的css,兼容IE和火狐
- CSS设置滚动条样式
- CSS中使用expression完美设置页面最小宽度(兼容ie)
- CSS、XHTML中隐藏滚动条与设置样式
- CSS设置DIV Herf底层图片和链接同时改变,兼容IE,Firefox,Opera,Safari,Chrome等
- CSS对div滚动条的样式设置
- css样式设置图片半透明度,兼容各种浏览器
- css 设置网页边框滚动条样式
- div+css滚动条属性及样式设置
- CSS 透明样式 兼容IE、FF、及其它
- 兼容 IE 和 FF 的换行 CSS 推荐样式(转)
- CSS 样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别
- css设置滚动条的样式
- CSS设置滚动条样式
- css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式