代码之家  ›  专栏  ›  技术社区  ›  Simsons

隐藏CSS滚动条,直到满足最大宽度和最大高度条件

  •  1
  • Simsons  · 技术社区  · 6 年前

    当div中的内容超过最大宽度时,我试图显示滚动条。

    下面是显示滚动位置的代码段。但问题是,即使没有滚动条,滚动条也会出现。如果我们在全屏模式下运行下面的代码片段,那么我们可以注意到,默认情况下滚动条是可见的。我需要它们只在满足最大宽度或最大高度约束时出现。

    .scrollbar{
        height: 150px;
        overflow:scroll;  
    }
    
    .big-box{
      height:800px;
      width:1000px;
      background-color:#A8D0DB;
    }
       <div class="scrollbar" id="style-1">   
          <div class="big-box"></div>
       </div>

    https://jsfiddle.net/g6fehv2w/1/

    1 回复  |  直到 6 年前
        1
  •  3
  •   Unmitigated    6 年前

    你可以用 overflow: auto ,它只在内容溢出时显示滚动条。

    你可以设定 overflow-y auto overflow-x 汽车 只在水平内容溢出时显示滚动条。

    documentation