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

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

找到了解决办法。它适用于尺寸小于幻灯片尺寸的可滚动块。因为如果它具有相等的大小（或几乎相等），则很难通过鼠标滚轮更改滑动，因为可滚动块会捕获鼠标滚轮事件。这个想法很简单：只需 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)');
      }
    }
  }

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

Answer 2

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

  mousewheel: {
      forceToAxis: true,
  }

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

缺点是用户是否滚动到内容的底部并不重要。

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

附带说明：看起来 Swiper 的设计仅考虑了演示文稿/幻灯片。他们似乎没有考虑过内部滚动，在这种情况下，它可能不适合这项工作。