在 Safari 中禁用垂直滑块的弹跳效果，同时允许页面滚动

Question

如何在 Safari 中滚动垂直滑块时禁用“弹跳”效果，同时仍允许在到达最后一个滑块项目后滚动网站的其余内容？我尝试使用 overscroll-behavior: none;和overflow:scroll;，它消除了弹跳效果，但在到达最后一张幻灯片时阻止其余内容滚动。

Answer 1

要在 Safari 中专门针对垂直滑块禁用“弹跳”效果（也称为过度滚动），同时仍允许网页的其余部分在到达最后一个滑块项目后滚动，您可以结合使用 CSS 和 JavaScript。仅靠 CSS

overscroll-behavior: none;

无法完全解决 Safari 中的问题。

CSS

.slider-container {
  height: 300px; /* Adjust based on your design */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* This enables momentum scrolling on iOS */
  overscroll-behavior: contain; /* Prevents bounce in supported browsers */
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var slider = document.querySelector('.slider-container');

  slider.addEventListener('touchstart', function() {
    var scrollTop = slider.scrollTop;
    var scrollHeight = slider.scrollHeight;
    var offsetHeight = slider.offsetHeight;
    var contentHeight = scrollHeight - offsetHeight;

    if (scrollTop === 0) {
      slider.scrollTop = 1;
    } else if (scrollTop === contentHeight) {
      slider.scrollTop = contentHeight - 1;
    }
  });

  slider.addEventListener('touchmove', function(evt) {
    if (slider.scrollTop === 0 || slider.scrollTop === (slider.scrollHeight - slider.offsetHeight)) {
      evt.preventDefault();
    }
  });
});