Question

我正在使用Swiper制作全屏滑块，其中通过鼠标滚轮控制幻灯片更改。但是在某些幻灯片中，我已经溢出了内容。当我尝试滚动此内容时-幻灯片会切换到下一个。

仅当我滚动到幻灯片内容的末尾时，才可以滚动到下一张幻灯片吗？这是一个演示https://codepen.io/olegburakov/pen/EdqeLW，我想通过鼠标滚轮滚动到第一张幻灯片的底部。

//js
var swiperOptions = {
  loop: false,
  speed: 1000,
  grabCursor: false,
  mousewheel: true,
};

var swiper = new Swiper(".swiper-container", swiperOptions);

//css
.swiper-slide {
  overflow: auto;
}

Answer 1

这是部分解决方案，也许会有所帮助。尝试将其添加到您的Swiper配置中

  mousewheel: {
      forceToAxis: true,
  }

当用户使用触控板或鼠标滚轮垂直滚动时，它将停止swiper进行水平滚动，从而具有将默认行为恢复为垂直滚动的效果。它可以在Codepen中使用。

不利之处在于用户是否已滚动到内容的底部都没有关系。

如果您可以更改Swiper实例的配置而无需重新初始化它，则可以根据用户是否滚动到当前底部来添加自己的事件处理，以打开/关闭forceToAxis幻灯片的内容。

在旁注：看起来Swiper的设计仅考虑了演示文稿/幻灯片。看来他们没有考虑过内部滚动，在这种情况下，它可能不是适合该工作的库。

Answer 2

找到了解决方案。它适合大小小于幻灯片大小的可滚动块。因为如果它的大小相等（或几乎相等），将很难通过鼠标滚轮更改幻灯片，因为可滚动块将捕获鼠标滚轮事件。这个想法很简单：将事件的stopPropagation放在可滚动块中。

document.querySelector('.scrollable-content').addEventListener('mousewheel', function(e){
    e.stopPropagation();
  });

演示：https://codepen.io/olegburakov/pen/vVoPBE

即使我找到了一种解决方案来检查滚动是否结束，也没有演示，但这是代码：

  const scrollableBlock = document.querySelector('.scrollable-block');
     if ('onwheel' in document) {
        // IE9+, FF17+, Ch31+
        scrollableBlock.addEventListener('wheel', scrollOverflowBlock);
      } else if ('onmousewheel' in document) {
        // for old
        scrollableBlock.addEventListener('mousewheel', scrollOverflowBlock);
      }

  function scrollOverflowBlock(e) {
    const delta = e.deltaY || e.wheelDelta;

    //Scroll up
    if (delta < 0) {
      if (e.target.scrollTop !== 0) {
        e.stopPropagation();
        console.log('Slider scroll stopped (top)');
      }
    }
    //Scroll down
    else {
      //http://qnimate.com/detecting-end-of-scrolling-in-html-element/
      if (e.target.offsetHeight + e.target.scrollTop !== e.target.scrollHeight) {
        e.stopPropagation();
        console.log('Slider scroll stopped (bottom)');
      }
    }
  }

也许对某人会有帮助，或者某人提出更好的解决方案。

具有内容溢出和内部滚动条的水平鼠标滚轮滑块

2 个答案: