在瀏覽器調整大小時重新同步「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();

獎勵：我讓該函數更加通用，以便您可以選擇滑動視窗中想要有多少個子級。