隐藏滚动条同时保留页面滚动的效果?

最新推荐文章于 2020-01-17 10:12:19 发布

thangco

最新推荐文章于 2020-01-17 10:12:19 发布

阅读量185

点赞数 1

分类专栏：练习123

本文链接：https://blog.csdn.net/weixin_42531071/article/details/82080414

版权

练习123 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 写项目的时候想要页面内容溢出时有滚动的效果加了属性overflow:auto,但是出现了滚动条使得页面不那么美观，想着如何去掉滚动条同时滚动鼠标滚轮时页面随之滚动，在网上找了好久资料，终于找到个方法，亲测有效。
    总的来说就是，在外层套个div，使得其宽度小于内层div，并overflow:hidden,这样内层div的滚动条就看不见了

<style>
  .daily-list-wrap{
    width:280px;
    height:100%;
    position:fixed;
    top:0;
    bottom:0;
    left:150px;
    overflow:hidden;
    border-right:1px solid #d7ddd4;
}
.daily-list{
    width:300px;
    height:100%;
    overflow-x:hidden;
    overflow-y: scroll;
}
</style>
<body>
 <div class="daily-list-wrap">
        <div class="daily-list">
           .......//代码省略
        </div>
        </div>
</body>