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

最新推荐文章于 2024-06-05 09:46:36 发布

yakelande

最新推荐文章于 2024-06-05 09:46:36 发布

阅读量5.3k

点赞数 2

分类专栏： CSS 文章标签：隐藏滚动条滚轮滚动隐藏网页的滚动条的方法 CSS怎么隐藏滚动条 overflowhidden 隐藏滚动条

本文链接：https://blog.csdn.net/yakelande/article/details/79159905

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在百度一搜很多这样提问的，但是很多回答的人都不懂我们到底要什么。我试了很多方法都未成功。
有人说overflow:hidden;啊可以隐藏滚动条啊。
是啊，是可以隐藏但不能滚动啊。当然用js的方法我就不说了，不靠谱（毕竟要加载完才能设置高度，不然一开始拿div的高度一般是不正确的，所以说我不想用js实现）。

纯css实现呢，我只能兼容IE9或者以上。我用的React，你用的时候把className换成class就行了

首先是webkit,::-webkit-scrollbar{width: 0;}这个伪类是很好可惜只有webkit支持。
我下面说的方法是包括火狐谷歌IE（9和9+）都支持，但是得用局部滚动overflow:auto;
最简单的demo:
<!DOCTYPE html>

<html>

<div id="root"style="width: 100%;height: 100%" >
   <div className="outer-container">
      <div classname="inner-container">
         <div className="container">
         </div>
      </div>
   </div>
</div>

CSS:

    .outer-container{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.inner-container{
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: content-box;
    padding-right: 17px;
}

//box-sizing一定要加啊，我之前试了n种方法就是缺了这个属性，这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别
应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。//

yakelande

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS 实现隐藏滚动条同时又可以滚动

在百度一搜很多这样提问的，但是很多回答的人都不懂我们到底要什么。我试了很多方法都未成功。有人说overflow:hidden;啊可以隐藏滚动条啊。是啊，是可以隐藏但不能滚动啊。当然用js的方法我就不说了，不靠谱（毕竟要加载完才能设置高度，不然一开始拿div的高度一般是不正确的，所以说我不想用js实现）。纯css实现呢，我只能兼容IE9或者以上。我用的React，你用的时候把className换成c...
复制链接

扫一扫