CSS 实现隐藏滚动条同时又可以滚动

转载自：http://www.cnblogs.com/alice626/p/6206760.html

移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？

使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。
由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器
::-webkit-scrollbar。

关于这个选择器的介绍可以参考：
Styling Scrollbars
Custom Scrollbars in WebKit

应用如下 CSS 可以隐藏滚动条：

.element::-webkit-scrollbar {display:none}

如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

 <div class="outer-container"><div class="inner-container"><div class="content">......</div></div></div>
.outer-container,.content {width: 200px; height: 200px;
}
.outer-container {position: relative;overflow: hidden;
}
.inner-container {position: absolute; left: 0;overflow-x: hidden;overflow-y: scroll;
}/* for Chrome */
.inner-container::-webkit-scrollbar {display: none;
}

参考：Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Safari

https://blog.niceue.com/front-end-development/hide-scrollbar-but-still-scrollable-using-css.html

实现隐藏滚动条同时又可以滚动相关推荐

如何实现隐藏滚动条但仍可以滚动
隐藏滚动条但仍可以滚动其实大致思路就是,让里面内容的高度高于外层容器即可,外层容器overflow: hidden,内层overflow: auto 移动端移动端页面只要兼容 Chrome 和 S ...
html让下拉条消失,CSS 实现隐藏滚动条同时又可以滚动
移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性. 由于只需要兼容移动浏览器( ...
隐藏滚动条但不影响滚动
前情提要:我的子元素的总高度超过了100%,所以会出现滚动条要求:滚动条隐藏,但是还可以滚动,兼容各种浏览器[我测试了谷歌.IE.搜狗.QQ浏览器都是可以的] 代码: html{height: 10 ...
如何隐藏滚动条还能实现滚动的功能
有时候,我们需要用到滚动条的功能,但是又不需要展示出滚动条给用户看这种奇葩的需求,那么我们要怎么来实现呢?下面我提供了两种方案,适用于pc端.也适用与移动端. 第一种方案,通过样式来隐藏原生的滚动条, ...
隐藏滚动条，保留鼠标滚动效果
原作者地址:https://blog.csdn.net/liusaint1992/article/details/51277751 当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是 ...
关于文本输入框隐藏滚动条但是依旧可以滚动的问题
设置了一个高度自适应,有最大高度的textarea文本框,并且可以滚动,但是在移动端上总是会出现黑点,实际上是滚动条的问题,解决方法是在css样式上添加 ::-webkit-scrollbar{dis ...
纯css，div隐藏滚动条，保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的 ...
纯css，div隐藏滚动条，保留鼠标滚动效果
一.使用场景当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保 ...
css div隐藏滚动条，保留鼠标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...

实现隐藏滚动条同时又可以滚动

CSS 实现隐藏滚动条同时又可以滚动

实现隐藏滚动条同时又可以滚动相关推荐

最新文章

热门文章