只能说,既然需求有,那就得硬着头皮做!光这个兼容滚动条就花了我一早上+下午俩小时的时间!
需求:
一个可以滚动内容的div,超出高度隐藏内容,但是要保留滚动效果又不出现滚动条,同时兼容各种浏览器。
思路:
- 假设这个div叫做scroll_content,规定width和height。
- overflow-x:hidden; overflow-y:auto;
- 想办法隐藏y滚动条
针对隐藏y滚动条的办法:
查了n多资料,(后面补上查过的资料)
列举一下看到的方法
- 对各种浏览器进行的scroll-bar设置
- 如图,使用盖住的方法来隐藏y滚动轴
- 干脆摒弃这个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滚动条的浏览器有:
- 欧朋浏览器
- 谷歌浏览器
- safari浏览器
- 360浏览器 极速模式
- uc浏览器
- 360浏览器 兼容模式
- 360极速浏览器 兼容模式
- 360极速浏览器 IE11
- IETester的IE10、IE12
- win10自带IE
- 猎豹浏览器
- 火狐
有用的参考资料
看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版本的,如下图)
链接都在这里:
- https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-coordinate
- http://www.iteye.com/topic/1129213
- http://www.iteye.com/topic/1129213
- http://tech.sina.com.cn/s/2009-07-22/1509993915.shtml
方法二:使用盖住的方法来隐藏y滚动轴(对个人来说思路太混乱),于是没有使用,看每个人各自的使用场景
我的使用场景是这样的盒子模型:畏怯scroll-content背景色是半透明的效果,思路混乱到不知道应该在哪里给加上个div然后来一个overflow:hidden;的才能把这个滚动条个遮住,于是放弃了这个方法。
方法三:使用iframe然后隐藏y滚动轴还要保留滚动效果的,没有使用。资料找到的都是直接scrolling的取值为no,隐藏是隐藏了,但是同时也没有了滚动的效果
参考链接:
iframe标签的属性:http://www.w3school.com.cn/tags/tag_iframe.asp