去除浏览器默认滚动条且不影响正常滚动

时间是包治百病的庸医

于 2021-01-12 18:25:54 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 经验分享

本文链接：https://blog.youkuaiyun.com/leng0920/article/details/112542010

经验分享同时被 2 个专栏收录

149 篇文章

订阅专栏

vue

136 篇文章

订阅专栏

博客提及了HTML和CSS，这两者是前端开发的重要技术，HTML用于构建网页结构，CSS用于设计网页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:

     <div class="change-content">
        <div class="content-wrap" >
          很多内容
        </div>
      </div>

css：

 .stable-nav {
      /*固定宽度*/
      width: 2.37rem;
      box-shadow: 0rem 0.03rem 0.06rem rgba(223, 230, 235, 0.16);
      overflow-y: auto;
      overflow-x: hidden;
    }
    .change-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      .content-wrap {
        flex: 1;
        height: 0;
        overflow-y: scroll;
        scrollbar-width: none; /* 滚动条宽度有三种：thin、auto、none ,主要用于处理火狐浏览器*/
      }
      /* 修改滚动条样式 */
      .content-wrap::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0 !important;
     
      }
      .content-wrap::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        width: 0 !important;
        
      }