隐藏滚动条保留滚动效果

562 阅读1分钟

针对隐藏y滚动条css代码

/*webkit内核*/ 
.scroll_content::-webkit-scrollbar {
 width:0px;
 height:0px;
 }
 .scroll_content::-webkit-scrollbar-button{
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-webkit-scrollbar-track {
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-webkit-scrollbar-track-piece {
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-webkit-scrollbar-thumb{
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-webkit-scrollbar-corner {
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-webkit-scrollbar-resizer  {
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-webkit-scrollbar {
 width:10px;
 height:10px;
 }
 /*o内核*/
 .scroll_content .-o-scrollbar{
 -moz-appearance: none !important;   
 background: rgba(0,255,0,0) !important;  
 }
 .scroll_content::-o-scrollbar-button{
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-o-scrollbar-track {
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-o-scrollbar-track-piece {
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-o-scrollbar-thumb{
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-o-scrollbar-corner {
 background-color:rgba(0,0,0,0);
 }
 .scroll_content::-o-scrollbar-resizer  {
 background-color:rgba(0,0,0,0);
 }
 /*IE10,IE11,IE12*/
 .scroll_content{
 -ms-scroll-chaining: chained;
 -ms-overflow-style: none;
 -ms-content-zooming: zoom;
 -ms-scroll-rails: none;
 -ms-content-zoom-limit-min: 100%;
 -ms-content-zoom-limit-max: 500%;
 -ms-scroll-snap-type: proximity;
 -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
 -ms-overflow-style: none;
 overflow: auto;
 }

除了火狐要用jq插件控制,其他的css均可以修改

经测试,正确隐藏了y滚动条的浏览器有:
- 
- 欧朋浏览器
- 谷歌浏览器
- safari浏览器
- 360浏览器 极速模式
- uc浏览器
- 360浏览器 兼容模式
- 360极速浏览器 兼容模式
- 360极速浏览器 IE11
- IETesterIE10IE12
- win10自带IE
- 猎豹浏览器
- 火狐