浏览器窗口缩放时滑块元素宽度偏移问题排查求助

开发滑块组件时遇到以下问题：浏览器窗口大小调整后，slide元素宽度偏移，滑块超出显示区域被overflow:hidden截断；但刷新页面后宽度计算恢复正常。

问题原因 #

1. 未实时同步宽度变化：当前代码仅在点击按钮时临时获取slide.clientWidth，窗口resize后slide实际宽度已改变，但之前的滚动位置未同步调整，导致偏移。
2. Flex布局属性冲突：.slide同时设置width:100%和flex:4 0 25%，flex-basis已定义基准宽度，width属性会干扰布局计算，resize时容易出现宽度偏差。
3. 无resize事件处理逻辑：窗口尺寸变化时，未触发滑块布局的重新计算，导致滚动位置与新的slide宽度不匹配。

修复方案 #

• 移除.slide中冲突的width:100%，保留flex属性控制宽度；
• 监听窗口resize事件，实时更新滑块布局，必要时修正滚动位置；
• 为resize事件添加防抖，避免频繁触发计算影响性能。

修改后的完整代码 #

JavaScript

const slidesContainer = document.getElementById("slides-container");
let slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");

// 防抖函数，限制resize事件触发频率
function debounce(func, delay = 100) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 处理窗口resize后的滑块布局调整
function handleResize() {
  slide = document.querySelector(".slide");
  const slideWidth = slide?.clientWidth || 0;
  const currentScroll = slidesContainer.scrollLeft;
  // 修正滚动位置到最近的slide边界
  const nearestSlide = Math.round(currentScroll / slideWidth) * slideWidth;
  slidesContainer.scrollLeft = nearestSlide;
}

// 按钮点击逻辑，确保每次获取最新slide宽度
nextButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft += slideWidth;
});

prevButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft -= slideWidth;
});

// 监听窗口resize事件
window.addEventListener("resize", debounce(handleResize));

CSS

.slider-wrapper {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}

.slides-container {
    height: 100%;
    width: calc(100% - 60px);
    display: flex;
    list-style: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
}

.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

#slide-arrow-prev {
  left: 0;
  padding-left: 0.25rem;
  border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
  right: 0;
  padding-left: 0.75rem;
  border-radius: 2rem 0 0 2rem;
}

.slide {
    height: unset!important;
    flex: 0 0 25%; /* 去掉flex-grow属性，确保宽度严格按25%计算 */
    display: flex;
}

HTML

<section class="slider-wrapper">
  <button class="slide-arrow" id="slide-arrow-prev">
    &#8249;
  </button>
  <button class="slide-arrow" id="slide-arrow-next">
    &#8250;
  </button>
  <ul class="slides-container" id="slides-container">
    <li class="slide">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</li>
    <li class="slide">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

</li>
    <li class="slide">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

</li>
    <li class="slide">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. 
</li>    
    <li class="slide">Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</li>    
  </ul>
</section>

关键说明 #

• 调整.slide的flex属性为flex:0 0 25%，移除干扰的width属性，确保slide宽度严格按比例计算；
• 通过resize事件监听+防抖，在窗口尺寸变化时更新slide引用并修正滚动位置，避免偏移；
• 点击按钮时始终获取最新的slide.clientWidth，保证滚动距离与当前slide宽度匹配。

内容的提问来源于stack exchange，提问作者linuxgx