隐藏/修饰页面的滚动条
2016-05-27 16:14
197 查看
默认的页面滚动条很丑,很多情况下和页面风格完全不搭;也见到很多网站漂亮的滚动条,其实是隐藏掉默认的滚动条,然后自定义div和css,作出自己的滚动条,再配合js实现拖动和鼠标滚轮效果。
(Hiding the scrollbar on an HTML page,but still being able to scroll)
该修饰可以去掉div上的滚动条,div中的内容依然可以滚动,该属性只支持-webkit-内核的浏览器,像Chrome,Safari,Opera,Android Browser,Chrome for Android。 IE Edge FireFox不支持。
效果是这样的:
IE5.5+ 默认的滚动条样式:
Webkit
Webkit扩展的滚动条相关定制化是:
Mozilla
Mozilla 也做了一下操作滚动条的扩展,但是都不推荐使用
隐藏滚动条可以用一个父元素包裹,内部子元素设置padding-right将滚动条顶出去。
webkit美化滚动条的例子:
效果:
网易云音乐的scrollbar
.u-scroll::-webkit-scrollbar {
width:8px;
height:8px
}
.u-scroll::-webkit-scrollbar-track {
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0)
}
.u-scroll::-webkit-scrollbar-track:hover {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);
background-color:rgba(0,0,0,0.01)
}
.u-scroll::-webkit-scrollbar-track:active {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);
background-color:rgba(0,0,0,0.05)
}
.u-scroll::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.05);
border-radius:10px;
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll:hover::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2);
border-radius:10px;
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll::-webkit-scrollbar-thumb:hover {
background-color:rgba(0,0,0,0.4);
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll::-webkit-scrollbar-thumb:active {
background:rgba(0,0,0,0.6)
}
(Hiding the scrollbar on an HTML page,but still being able to scroll)
该修饰可以去掉div上的滚动条,div中的内容依然可以滚动,该属性只支持-webkit-内核的浏览器,像Chrome,Safari,Opera,Android Browser,Chrome for Android。 IE Edge FireFox不支持。
content { /* These rules create an artificially confined space, so we get a scrollbar that we can hide. They are not part of the hiding itself. */ border: 1px dashed gray; padding: .5em; white-space: pre-wrap; height: 5em; overflow-y: scroll;} .content::-webkit-scrollbar { /* This is the magic bit */ display: none;}
<div class='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus facilisis a. Vivamus vulputate enim felis, a euismod diam elementum non. Duis efficitur ac elit non placerat. Integer porta viverra nunc, sed semper ipsum. Nam laoreet libero lacus. Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum, eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium volutpat. Duis elementum magna vel velit elementum, ut scelerisque odio faucibus. </div>
效果是这样的:
IE5.5+ 默认的滚动条样式:
body, html { /* these are default, can be replaced by hex color values */ scrollbar-base-color: aqua; scrollbar-face-color: ThreeDFace; scrollbar-highlight-color: ThreeDHighlight; scrollbar-3dlight-color: ThreeDLightShadow; scrollbar-shadow-color: ThreeDDarkShadow; scrollbar-darkshadow-color: ThreeDDarkShadow; scrollbar-track-color: Scrollbar; scrollbar-arrow-color: ButtonText; }后来微软还加了前缀-ms-但是还是没有得到W3C的认可。
Webkit
Webkit扩展的滚动条相关定制化是:
::-webkit-scrollbar {} /* 1 */ ::-webkit-scrollbar-button {} /* 2 */ ::-webkit-scrollbar-track {} /* 3 */ ::-webkit-scrollbar-track-piece {} /* 4 */ ::-webkit-scrollbar-thumb {} /* 5 */ ::-webkit-scrollbar-corner {} /* 6 */ ::-webkit-resizer {} /* 7 */
Mozilla
Mozilla 也做了一下操作滚动条的扩展,但是都不推荐使用
-moz-scrollbars-none 推荐用overflow:hidden替代这玩意 -moz-scrollbars-horizontal 和overflow-x类似 -moz-scrollbars-vertical 和overflow-y类似 -moz-hidden-unscrollable //Only works internally within a users profile settings. Disables scrolling XML root elements and disables using arrow keys and mouse wheel to scroll web pages.
隐藏滚动条可以用一个父元素包裹,内部子元素设置padding-right将滚动条顶出去。
webkit美化滚动条的例子:
.resText{ overflow: auto; width: 300px; height:200px; background-color: #e2e2e2; } .resText>p{ color:#333; font-size: 14px; line-height: 23px; padding: 5px 10px; } /* Let's get this party started */ .resText::-webkit-scrollbar { width: 8px; } /* Track */ .resText::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 5px; border-radius: 5px; } /* Handle */ .resText::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background: rgba(255,0,0,.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } .resText::-webkit-scrollbar-thumb:window-inactive { background: #b72525; }
<div class="resText"> <p> ...省略一万字 </p> </div>
效果:
网易云音乐的scrollbar
.u-scroll::-webkit-scrollbar {
width:8px;
height:8px
}
.u-scroll::-webkit-scrollbar-track {
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0)
}
.u-scroll::-webkit-scrollbar-track:hover {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);
background-color:rgba(0,0,0,0.01)
}
.u-scroll::-webkit-scrollbar-track:active {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);
background-color:rgba(0,0,0,0.05)
}
.u-scroll::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.05);
border-radius:10px;
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll:hover::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2);
border-radius:10px;
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll::-webkit-scrollbar-thumb:hover {
background-color:rgba(0,0,0,0.4);
-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)
}
.u-scroll::-webkit-scrollbar-thumb:active {
background:rgba(0,0,0,0.6)
}
相关文章推荐
- 集成shareSDK3.3.0所遇到的问题
- JuheNews系列之二 · ToolBar+AppBarLayout+CoordinatorLayout+CollapsingToolbarLayout
- Android 学习路线总结
- 自行编写strcpy()函数
- 解决Grails端口号冲突问题
- Java中vector的使用详解
- 安卓Transition学习(一)
- 二叉树
- 解决AndroidStudio从网络引入三方jar包,项目中无法找到类问题
- 【论文笔记】Mutual-Structure for Joint Filtering
- JAVA 程序设置运行内存
- PAT 1013. Battle Over Cities (25)(并查集||DFS)
- Caffe源码阅读(2) 卷积层
- const、volatile、mutable的用法
- Excel
- CSS边框
- html前端代码
- 队列(链式存储)JAVA代码
- 【一天一道LeetCode】#67. Add Binary
- 【一天一道LeetCode】#67. Add Binary