内容固定高度可滚动但不展示滚动条

最新推荐文章于 2024-02-28 11:02:30 发布

sea易呀

最新推荐文章于 2024-02-28 11:02:30 发布

阅读量259

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_37832645/article/details/129715229

版权

该文章介绍了如何使用CSS来隐藏滚动条，以达到页面整洁的效果。通过设置`.box`类的`overflow-y`属性为`scroll`并禁用特定浏览器的滚动条显示，以及对Webkit内核浏览器使用伪元素选择器`::-webkit-scrollbar`来进一步隐藏滚动条，确保了在不同浏览器下的兼容性。同时，`.content`类保持了垂直方向的自动滚动功能。

摘要由CSDN通过智能技术生成

<div class="box">
   <div class='content'></div>
</div>

.box {
   height: 800px;
   overflow-y: scroll;
   -ms-overflow-style: none;  //ie
   scrollbar-width: none; 
   &::-webkit-scrollbar {   //chrome safari
     display: none;
  	}
 }
.content{
  overflow-y: auto;
  overflow-x: hidden;
}