我有一個水平滾動 div 和幾個子項目。根據寬度，子項目可能會被裁剪。所以你可能會得到 4 又 1/2 可見的項目。因此，我使用 Javascript 強制寬度均勻分佈子項。
我使用Javascript來偵測.palette的寬度，並將其除以我想要顯示的項目數（減去邊距），並將其應用於每個.swatch 。不確定是否有更好/更簡單的方法？
如果這是解決方案，我需要一些幫助，使其更加負責任，以便它在調整視窗大小時更新。
offsetWidth 在調整大小時更新，以便寬度更新。 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>
這個想法是，在您的
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();獎勵：我讓該函數更加通用，以便您可以選擇滑動視窗中想要有多少個子級。