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

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

您应该在滑动器中添加direction={"horizontal"}。

Answer 3

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

mousewheel: {
forceToAxis: true,
}

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

不利的一面是，用户是否已经滚动到内容的底部并不重要。

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

顺便说一句：Swiper的设计似乎只考虑了演示/幻灯片。看起来他们没有考虑过内部滚动，在这种情况下，它可能不是适合这份工作的库。