css3怎么隐藏滚动条

发布时间：2023-01-13 10:00:20 阅读：127 作者：iii 栏目：开发技术

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章主要介绍“css3怎么隐藏滚动条”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css3怎么隐藏滚动条”文章能帮助大家解决问题。

css3将滚动条隐藏的方法是，自定义滚动条的伪对象选择器【::-webkit-scrollbar】，例如【.element::-webkit-scrollbar { width: 0 !important }】。

方法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隐藏滚动条

自定义滚动条的伪对象选择器::-webkit-scrollbar。

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

IE 10+

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

Firefox

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

关于“css3怎么隐藏滚动条”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

css3怎么隐藏滚动条

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签