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

方法二:使用盖住的方法来隐藏y滚动轴(对个人来说思路太混乱),于是没有使用,看每个人各自的使用场景

我的使用场景是这样的盒子模型:畏怯scroll-content背景色是半透明的效果,思路混乱到不知道应该在哪里给加上个div然后来一个overflow:hidden;的才能把这个滚动条个遮住,于是放弃了这个方法。
这里写图片描述

方法三:使用iframe然后隐藏y滚动轴还要保留滚动效果的,没有使用。资料找到的都是直接scrolling的取值为no,隐藏是隐藏了,但是同时也没有了滚动的效果

参考链接:
iframe标签的属性:http://www.w3school.com.cn/tags/tag_iframe.asp

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值