搜索

首页  >  问答  >  正文

网格列在溢出时延迟调整大小

我有一个 2×2 CSS 网格,它使用固定定位填充浏览器视口。它看起来像这样:

-----------------
| |xxxxxxxxxxxxx|
-----------------
|x|             |
|x|             |
|x|             |
|x|             |
-----------------

顶行和左列各自适合其内容并且大小为auto。底行和右列分别用于占用任何剩余空间并具有大小 1fr

东北和西南单元格(图中充满了 X)都是可滚动的 Flex 父单元。它们包含任意数量的子元素,并且该数量可能会动态变化。我将每个属性的 overflow 属性设置为 auto 并使用这些规则集设置滚动条的样式:

.scrollable::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: darkgray;
}

.scrollable::-webkit-scrollbar-track {
  background: #666666;
}

当我在 macOS 上的 Chrome 中加载页面时,滚动条覆盖在西南单元格的内容上。然后,当我调整浏览器窗口大小时,左列会展开以容纳滚动条(它已经显示为覆盖层),并且它会移动到内容的右侧。

我希望滚动条根本不覆盖内容,并且我真的很想消除不相关的调整大小事件上的布局移位。你知道我如何实现这些目标吗?

此 Codepen 是一个最小的可重现示例。然而,它对我来说并不一致。当我重新加载页面时,有时滚动条被覆盖,有时该列已经足够宽,滚动条可以显示在内容的右侧。我在这个独立页面上看到了错误的覆盖和尺寸更一致。

P粉638343995P粉638343995475 天前612

全部回复(1)我来回复

  • P粉502608799

    P粉5026087992023-09-07 15:32:46

    为了防止这种情况,网格需要更新其尺寸并考虑滚动条。另一个问题是如何仅使用 css 来做到这一点。我想到为 grid-template-columns 应用 animation,它似乎有效:

    * {
      box-sizing:border-box;
    }
    
    #grid {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr;
      animation: grid 200ms;
    }
    
    @keyframes grid {
      to {
        grid-template-columns: auto 2fr;
      }
    }
    
    #nw {
      background-color: green;
    }
    
    .scrollable {
      display: flex;
    }
    
    #ne {
      background-color: red;
      flex-direction: row;
      overflow-x: auto;
    }
    
    #sw {
      background-color: yellow;
      flex-direction: column;
      overflow-y: auto;
      scrollbar-color: darkgray #666666;
      scrollbar-width: thick;
    }
    
    #se {
      background-color: blue;
    }
    
    .box {
      width: 4em;
      height: 4em;
      margin: 5px;
      border-radius: 5px;
      background-color: black;
      flex-shrink: 0;
    }
    
    .scrollable::-webkit-scrollbar {
      height: 10px;
      width: 10px;
    }
    
    .scrollable::-webkit-scrollbar-thumb {
      background: darkgray;
    }
    
    .scrollable::-webkit-scrollbar-track {
      background: #666666;
    }
    <div id="grid">
      <div id="nw"></div>
      <div id="ne" class="scrollable">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div id="sw" class="scrollable">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div id="se"></div>
    </div>


    如果你想用 JavaScript 来实现:

    setTimeout(() => grid.style.gridTemplateColumns = 'auto 2fr', 200)
    * {
      box-sizing:border-box;
    }
    
    #grid {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: auto 1fr;
    }
    
    #nw {
      background-color: green;
    }
    
    .scrollable {
      display: flex;
    }
    
    #ne {
      background-color: red;
      flex-direction: row;
      overflow-x: auto;
    }
    
    #sw {
      background-color: yellow;
      flex-direction: column;
      overflow-y: auto;
      scrollbar-color: darkgray #666666;
      scrollbar-width: thick;
    }
    
    #se {
      background-color: blue;
    }
    
    .box {
      width: 4em;
      height: 4em;
      margin: 5px;
      border-radius: 5px;
      background-color: black;
      flex-shrink: 0;
    }
    
    .scrollable::-webkit-scrollbar {
      height: 10px;
      width: 10px;
    }
    
    .scrollable::-webkit-scrollbar-thumb {
      background: darkgray;
    }
    
    .scrollable::-webkit-scrollbar-track {
      background: #666666;
    }
    <div id="grid">
      <div id="nw"></div>
      <div id="ne" class="scrollable">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div id="sw" class="scrollable">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div id="se"></div>
    </div>

    回复
    0
  • 取消回复