【滚动条】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