美文网首页
css 隐藏竖向滚动条(兼容IE浏览器,火狐浏览器)

css 隐藏竖向滚动条(兼容IE浏览器,火狐浏览器)

作者: 顺其自然AAAAA | 来源:发表于2020-05-19 11:52 被阅读0次

    css 隐藏竖向滚动条
    如果要去掉最有边的竖向滚动条,可以在vue 项目文件这样写:(可以是id或者class,都一样,但是id是唯一,这里只是单纯的隐藏这个页面的滚动条,不影响其他页面)

    <template>
    <div id="container">
      <div class="content">   
        这里面是滚动区域
      </div>
    </div>
    </template>
    

    下面是css部分(这个在谷歌浏览器有用,其他的IE好像没有效果)

    #container {
      ::-webkit-scrollbar {
         width: 0 !important;
       }
       ::-webkit-scrollbar {
         width: 0 !important;height: 0;
       }
    .content {
    /* 这个是兼容火狐浏览器的,如果若放在上面的#container那里,是不生效的,哪里需要隐藏就放在哪里 */
    scrollbar-width: none;
    }
    }
    

    其他浏览器隐藏滚动条的方法(火狐浏览器和苹果浏览器没有试验,亲测IE有用)

      -ms-overflow-style: none; /* IE 10+ */
      scrollbar-width: none; /* Firefox */
      ::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    

    0

    相关文章

      网友评论

          本文标题:css 隐藏竖向滚动条(兼容IE浏览器,火狐浏览器)

          本文链接:https://www.haomeiwen.com/subject/djnvohtx.html