防止滚动条无固定位置自动滚动

Question

我有一个孩子，它的滚动条从其父级继承了 w/h。每当父级由于视口大小而调整大小时，子级的滚动条就会调整大小，从而导致它自动滚动，如何在不设置固定 w/h 的情况下解决此问题？

    <section class="displaySection">
        <button class="leftArrow" id="prev" onclick="moveCarousle(this)">&#8656</button>     
        <button class="rightArrow" id="next" onclick="moveCarousle(this)">&#8656</button>
        <div class="displayCase">
            <div class="boxOfCandles"></div>
            <div class="medicine"></div>
            <div class="sports"></div>
            <div class="pets"></div>
            <div class="books"></div>
        </div>
    </section>

.displayCase {
    white-space: nowrap;
    border: 1px solid black;
    overflow: auto;
    width: inherit;
    height: inherit;
}
.displaySection {
    width: 60vw;
    border-radius: 15px;
    margin-top: 5pc;
    height: 40vw;
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    position: relative;

}

               .       

Answer 1

您遇到的子滚动条调整大小并导致自动滚动的问题可能是由于其父元素的动态调整大小造成的。要在不设置固定宽度/高度的情况下解决此问题，您可以结合使用 CSS 和 JavaScript。

解决方案：

CSS： 确保您的子元素 (

.displayCase

) 正确处理溢出，并且不会直接继承可能导致意外行为的维度。

JavaScript： 添加事件监听器来管理父元素调整大小时子元素的滚动位置。

以下是实现此方法的方法：

<section class="displaySection">
    <button class="leftArrow" id="prev" onclick="moveCarousel(this)">&#8656</button>
    <button class="rightArrow" id="next" onclick="moveCarousel(this)">&#8656</button>
    <div class="displayCase">
        <div class="boxOfCandles"></div>
        <div class="medicine"></div>
        <div class="sports"></div>
        <div class="pets"></div>
        <div class="books"></div>
    </div>
</section>

.displayCase {
    white-space: nowrap;
    border: 1px solid black;
    overflow: auto;
    width: 100%;  /* Use percentage instead of inherit */
    height: 100%; /* Use percentage instead of inherit */
}

.displaySection {
    width: 60vw;
    border-radius: 15px;
    margin-top: 5pc;
    height: 40vw;
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

Javascript：

window.addEventListener('resize', () => {
    const displayCase = document.querySelector('.displayCase');
    const scrollLeft = displayCase.scrollLeft;
    
    displayCase.style.overflow = 'hidden'; // Temporarily hide overflow to prevent auto-scroll
    requestAnimationFrame(() => {
        displayCase.scrollLeft = scrollLeft;
        displayCase.style.overflow = 'auto'; // Restore overflow
    });
});

说明：

• CSS调整：通过使用百分比（

  width: 100%;

  和

  height: 100%;

  ），子级将更顺利地适应父级的尺寸。
• JavaScript 处理： 窗口调整大小事件的事件监听器捕获子元素的当前滚动位置，暂时禁用滚动以防止自动滚动，然后在调整大小后重新应用滚动位置。

这种方法应该可以防止自动滚动行为，而不需要固定尺寸。

我希望这有帮助！ <3