zoukankan      html  css  js  c++  java
  • 在保持滚动功能的前提下隐藏滚动条的方法

    使用三个容器包围起来,不需要计算滚动条的宽度

    最外层容器设置宽高并隐藏超出内容,第二层容器设置滚动条,通过最外层的边框遮盖第二层的滚动条

    这样就将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。

    代码如下:

    //code from http://caibaojian.com/hide-scrollbar.html
     <div class="outer-container">
         <div class="inner-container">
            <div class="content">
                ......
            </div>
         </div>
     </div>
    .element, .outer-container {
       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;
    }
  • 相关阅读:
    [JSOI2016]最佳团体
    CF125E MST Company
    CF482C Game with Strings
    CF379F New Year Tree
    CF1051F The Shortest Statement
    小a和uim之大逃离
    新魔法药水
    翻硬币
    [CQOI2017]小Q的棋盘
    UVA11729突击战
  • 原文地址:https://www.cnblogs.com/webwangjie/p/14781430.html
Copyright © 2011-2022 走看看