(隐藏滚动条)滚动条隐藏但是内容可以滚动游览器兼容

今天项目中要实现一个功能，后台系统的左侧要固定，并且超出屏幕高度可以滚动，为了美观，要求隐藏左侧滚动条，对于谷歌直接用css来控制就好了--->.left-bar::-webkit-scrollbar {display: none;}来说很好做到，但是要兼容其他游览器，就不行了

为了兼容其他游览器，，投机取巧了我，大概意思就是用两个div包装，最外层div设置overflow:hidden,里面那层设置overflow-y: scroll;并且最里面的宽度是最外面宽度+15像素，这15像素就是右侧滚动调的宽度,具体代码如下（），

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.left-bar::-webkit-scrollbar {display: none;}.bar-content{width: 200px;height:100%;position: fixed;top:0;left: 0;bottom: 0;z-index: 999;}.no-bar{width:200px;height:100%;background:pink;overflow-x:hidden;position:relative;top:0;left:0;bottom:0;z-index:999;}.left-bar{width:215px;height: 100%;position: absolute;top: 0;left: 0;bottom: 0;z-index: 999;overflow-y: scroll;overflow-x:hidden;background: #464c5b;color: #fff}</style></head><body><div class="bar-content"><div class="no-bar"><div class="left-bar"><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p><p>哈哈哈撒上啊</p></div></div></div><script type="text/javascript">//alert(window.innerHeight)</script></body></html>

(隐藏滚动条)滚动条隐藏但是内容可以滚动游览器兼容相关推荐

html自动移动滚动条,css隐藏移动端滚动条并平滑滚动
HTML代码如下移动端隐藏滚动条解决方案 *{ padding:0; margin:0; } .par-type{ height:50px; -webkit-box-sizing:border-bo ...
js 实现pc端鼠标拖动触发横向滚动条的滚动（隐藏的滚动条）
如果您想插件实现,如下链接:better-scroll better-scroll | :scroll: inspired by iscroll, and it supports more featu ...
html iframe随页面滚动,如何隐藏iframe的滚动条，但依然可以页面滚动
今天遇到一个这样的问题:网页中如何隐藏iframe中的垂直滚动条,但依然可以用滚轮实现页面滚动???我就想先把iframe定义宽度和高度,在设置overflow:hidden;呗,但是这样多余的部分会 ...
Web端隐藏垂直滚动条且保留滚动效果
在做项目时,发现UI们常常为了快速出图,在设计UI图时只设计一种正常情况下的布局,但是往往实际应用中,内容超出限定区域是很常见的现象,当内容超出时,如果css样式没有设置隐藏则会出现滚动条,而滚动条的 ...
C#中如何隐藏滚动条(ScrollBar)同时又具备自动滚动的功能
C#中如何隐藏滚动条(ScrollBar)同时又具备自动滚动的功能 (2011-01-30 13:38:28) 转载▼ 标签: it http://blog.sina.com.cn/s/blog_ ...
Css实现自动隐藏scroll滚动条但不影响滚动功能
Css实现自动隐藏scroll滚动条但不影响滚动功能谷歌内核webkit .container::-webkit-scrollbar {display: none; //Safari and Chr ...
【Axure交互教程】隐藏页面滚动条的3种方法
作品名称:隐藏页面滚动条的3种方法作品编号:Case001 软件版本:Axure9 作品类型:交互案例原型预览链接(附源文件下载链接):http://daisyaxure.com/demo/Cas ...
浏览器滚动条的隐藏和显示
兼容谷歌和火狐,Edge 本人的理解: 滚动条的隐藏和消失: 1.首先用个状态来保存是否开始滚动的状态,初始化状态为true 2.当滚轮滚动的时候,把是否滚动状态置为false,添加一个定时器setT ...
隐藏scrollbar滚动条
转载:http://caibaojian.com/hide-scrollbar.html 隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 ...

(隐藏滚动条)滚动条隐藏但是内容可以滚动游览器兼容

(隐藏滚动条)滚动条隐藏但是内容可以滚动游览器兼容相关推荐

最新文章

热门文章