Resynchroniser la valeur "offsetWidth" lors du redimensionnement du navigateur

Question

J'ai un div à défilement horizontal avec plusieurs sous-éléments. En fonction de la largeur, les sous-éléments peuvent être rognés. Vous pourriez donc vous retrouver avec 4 éléments et demi visibles. J'utilise donc Javascript pour forcer la largeur afin de répartir uniformément les enfants.

J'utilise Javascript pour détecter .palette的宽度，并将其除以我想要显示的项目数（减去边距），并将其应用于每个.swatch. Vous ne savez pas s'il existe un moyen meilleur/plus simple ?

Si c'est la solution, j'ai besoin d'aide pour la rendre plus responsable afin qu'elle se mette à jour lorsque la fenêtre est redimensionnée.

1. Je veux offsetWidth mettre à jour lors du redimensionnement afin que la largeur soit mise à jour.
2. Est-il possible d'utiliser matchMedia des valeurs différentes au-dessus de certains "points d'arrêt" ? Cette partie fonctionne !

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

L'idée est, dans votre resize 回调函数中，您只是更新父元素 (.palette) 的宽度，而不是子元素的宽度（.swatch).

Utilisation du nouveau code 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();

Bonus : J'ai rendu la fonction plus générale afin que vous puissiez choisir le nombre d'enfants que vous souhaitez dans la fenêtre coulissante.