在浏览器调整大小时重新同步“offsetWidth”值

Question

我有一个水平滚动 div 和几个子项目。根据宽度，子项目可能会被裁剪。所以你可能会得到 4 又 1/2 可见的项目。因此，我使用 Javascript 强制宽度均匀分布子项。

我使用Javascript来检测.palette的宽度，并将其除以我想要显示的项目数（减去边距），并将其应用于每个.swatch。不确定是否有更好/更简单的方法？

如果这是解决方案，我需要一些帮助，使其更加负责任，以便它在调整窗口大小时更新。

1. 我希望 offsetWidth 在调整大小时更新，以便宽度更新。
2. 是否可以使用 matchMedia 在某些“断点”之上使用不同的值？这部分有效！

let palette = document.querySelector('.palette');
let paletteWidth = palette.offsetWidth;
let swatch = document.querySelectorAll('.swatch')

swatch.forEach((item) => {
    if (window.matchMedia("(min-width: 700px)").matches) {
    item.style.width = (paletteWidth - 40) / 5 + "px";
    } else {
    item.style.width = (paletteWidth - 30) / 4 + "px";
    }
});

const handleResize = () => {
    let paletteWidth = palette.offsetWidth;
};

window.addEventListener('resize', handleResize);

.p-card {
  background: #eee;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  padding: 30px 15px;
  max-width: 50%;
}

.palette {
  display: flex;
  overflow-x: scroll;
}

.palette__inner {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.palette__inner::-webkit-scrollbar {
  display: none;
}

.palette__group {
  display: flex;
  flex-direction: column;
}

.palette__title {
  font-family: "Arial", sans-serif;
  font-size: 11px;
  font-weight: normal;
  margin: 0 10px 10px 0;
  padding: 0;
  position: sticky;
  align-self: flex-start;
  left: 0;
}

.palette__swatches {
  display: flex;
}

.swatch {
  background: red;
  display: flex;
  height: 20px;
  margin-right: 10px;
  scroll-snap-align: start;
  width: 40px;
}

<div class="p-card">

  <div class="palette">
    <div class="palette__inner">
    
       <div class="palette__group">
        <h4 class="palette__title">Classic</h4>
        <div class="palette__swatches">
          <div class="swatch" style="background: red;"></div>
          <div class="swatch" style="background: red;"></div>
          <div class="swatch" style="background: red;"></div>
          <div class="swatch" style="background: red;"></div>
          <div class="swatch" style="background: red;"></div>
          <div class="swatch" style="background: red;"></div>
        </div>    
      </div>
      
      <div class="palette__group">
        <h4 class="palette__title">Matte</h4>
        <div class="palette__swatches">
          <div class="swatch" style="background: blue;"></div>
          <div class="swatch" style="background: blue;"></div>
          <div class="swatch" style="background: blue;"></div>
          <div class="swatch" style="background: blue;"></div>
          <div class="swatch" style="background: blue;"></div>
          <div class="swatch" style="background: blue;"></div>
        </div>     
      </div>
      
      <div class="palette__group">
        <h4 class="palette__title">Glimmer</h4>
        <div class="palette__swatches">
          <div class="swatch" style="background: green;"></div>
          <div class="swatch" style="background: green;"></div>
          <div class="swatch" style="background: green;"></div>
          <div class="swatch" style="background: green;"></div>
          <div class="swatch" style="background: green;"></div>
          <div class="swatch" style="background: green;"></div>
        </div>  
      </div>

    </div>
  </div>

</div>

Answer 1

这个想法是，在您的 resize 回调函数中，您只是更新父元素 (.palette) 的宽度，而不是子元素的宽度（.swatch）。

采用新的 JS 代码：

let palette = document.querySelector('.palette');
let swatchs = document.querySelectorAll('.swatch')

function setSwatchWidth(n = 5) {
  let paletteWidth = palette.offsetWidth;
  swatchs.forEach((swatch) => {
    swatch.style.width = (
      paletteWidth - (n-1) * 10
    ) / n + "px";
  });
}
onload = () => setSwatchWidth();
onresize = () => setSwatchWidth();

奖励：我使该函数更加通用，以便您可以选择滑动窗口中想要有多少个子级。