You are here

CSS实现隐藏滚动条但是可以滚动有大用

星期三, 2020-04-15 01:01 — adminshiping1

今天记录一个很小的问题，在工作之中会经常遇到的，当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。

body::-webkit-scrollbar {
                            
display: none;
                            
}

示例代码

<!DOCTYPE html>
                            
<html>
                            
<head>
                            
<meta charset="UTF-8">
                            
<title></title>
                            
<style>
                            
.cont {
width: 200px;
height: 200px;
border: 1px solid #000000;
overflow-x: hidden;
}
.cont::-webkit-scrollbar {
display: none;
}
</style>
                            
</head>
                            
<body>
                            
<div class="cont">
                            
<p>王小婷</p>
                            
<p>王小婷</p>
                            
<p>王小婷</p>
                            
<p>王小婷</p>
                            
<p>王小婷</p>
                            
<p>王小婷</p>
                            
</div>
                            
</body>
                            
</html>

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。

来自 https://blog.csdn.net/qq_36538012/article/details/89200121

css设置去掉滚动条依然可以滚动

在一些前端开发过程中，有些区块显示滚动条会显示得特别难看（例如：左侧菜单栏显示一个滚动调），但是又需要有滚动的功能，这个时候怎么办呢？可以通过使用css进行设置隐藏滚动条依然可以滚动。

思路：创建一个父<div>和一个子<div>,然后给父<div>设置一个高度和内容超出后隐藏的样式，同时给子<div>设置内容超出后显示滚动条、高度为100%、宽=100%+滚动条的宽

css设置去掉滚动条依然可以滚动

css设置去掉滚动条依然可以滚动

方法/步骤

1
打开前端开发工具，新建一个HTML代码页面
2
在html代码页面上创建一个父<div>和一个子<div>，同时给这两个div添加一个class分别为scroll-box、scroll
3
给子<div>添加内容，为了让滚动条可以实现，尽量多添加一些内容
4
为了保存html，查看一下添加内容内容是否成功（主要是为了与后面添加隐藏滚动条效果进行对比）
5
回到html代码页面。设置scroll-box、scroll类样式。给scroll-box设置一个高度和内容超出后隐藏的样式，给scroll设置内容超出后显示滚动条、高度为100%、宽=100%+滚动条的宽
6
保存html代码，然后使用浏览器打开，这个时候会发现滚动条已经不显示出来，但是页面内容依然可以滚动

END

经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。

举报作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。

来自 https://jingyan.baidu.com/article/656db91827fac8e381249c00.html

3种方法实现CSS隐藏滚动条并可以滚动内容

2018-03-1716820View

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。

方法1：计算滚动条宽度并隐藏起来

在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？其实我只是把滚动条通过定位把它隐藏了起来。

下面给一个简化版的代码

<div class="outer-container">
    <div class="inner-container">
    	......
    </div>
</div>

.outer-container{
	width: 360px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.inner-container{
	position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题。

方法2：使用三个容器包围起来，不需要计算滚动条的宽度

该代码最早是在Microsoft博客上看到的，跟我上面的思路差不多，只不过人家里面又加多了一个盒子，将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。

代码如下：

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

.element, .outer-container {
  width: 200px;
  height: 200px;
}

.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}

.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.inner-container::-webkit-scrollbar {
  display: none;
}

方法3：css隐藏滚动条

同时该文章还分享了一种通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。

那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3自定义webkit滚动条样式

chrome 和Safari

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }

文章目录

原文：3种方法实现CSS隐藏滚动条并可以滚动内容，未经许可，禁止转载。
来源：前端开发博客 (http://caibaojian.com/hide-scrollbar.html)

来自 http://caibaojian.com/hide-scrollbar.html

普通分类: