【滚动条】div隐藏滚动条仍保留滚动效果,兼容IE,FF,Webkit 和 O

需求:

一个可以滚动内容的div,超出高度隐藏内容,但是要保留滚动效果又不出现滚动条,同时兼容各种浏览器。


思路:

  1. 假设这个div叫做scroll_content,规定width和height。
  2. overflow-x:hidden; overflow-y:auto;
  3. 想办法隐藏y滚动条

针对隐藏y滚动条的办法:

查了n多资料,(后面补上查过的资料) 
列举一下看到的方法

  1. 对各种浏览器进行的scroll-bar设置
  2. 如图,使用盖住的方法来隐藏y滚动轴 
    这里写图片描述
  3. 干脆摒弃这个div使用iframe 
    这里写图片描述 
    这里写图片描述

方法一:对各种浏览器进行的scroll-bar设置(有用

代码:

/*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;
}

<script src="lib/jquery.min.js"></script>
<script src="lib/jquery.nicescroll.min.js"></script>
$(function(){
    //FF下用JS实现自定义滚动条
    $(".scroll_content").niceScroll({cursorborder:"",cursorcolor:"rgba(0,0,0,0)",boxzoom:true});
})

最后效果(涉及到公司项目就不截图了直接文字表述)

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

经测试,正确隐藏了y滚动条的浏览器有:

  1. 欧朋浏览器
  2. 谷歌浏览器
  3. safari浏览器
  4. 360浏览器 极速模式
  5. uc浏览器
  6. 360浏览器 兼容模式
  7. 360极速浏览器 兼容模式
  8. 360极速浏览器 IE11
  9. IETester的IE10、IE12
  10. win10自带IE
  11. 猎豹浏览器
  12. 火狐

有用的参考资料

看webkit的: https://www.lyblog.net/detail/314.html

看IE的: https://msdn.microsoft.com/library/hh772034(v=vs.85).aspx

看FireFox的:http://www.jq22.com/jquery-info1161

找资料的历程:

就火狐比较难搞,下面Firefox的资料:(对我来说没有效果) 
先说明,我的FF版本是这里写图片描述

找到的比如说, 
-moz-document url-prefix(http://),url-prefix(https://)的(好像针对的是4版本的,如下图) 
这里写图片描述

用jscroll.js都没有效果(好像针对的是4版本的,如下图)

这里写图片描述

链接都在这里:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-coordinate
  2. http://www.iteye.com/topic/1129213
  3. http://www.iteye.com/topic/1129213
  4. http://tech.sina.com.cn/s/2009-07-22/1509993915.shtml

猜你喜欢

转载自blog.csdn.net/wjx_jasin/article/details/80651964