第二张幻灯片之后，下一张幻灯片不会滚动

Question

我试图仅通过鼠标滚轮进行水平滚动，div将捕捉到边缘或中心，这意味着在一次滚动中，一张幻灯片进入，下一张幻灯片出现在视图中。所以我搜索发现——https://codepen.io/vasiluca/pen/xWEQdQ?editors=0010-我使用并做了一些更改。第一张和第二张幻灯片可以很好地滚动，但下一张幻灯片不能通过鼠标滚轮滚动。

Jq

var scrolling = false;
var scrolled = 0;
const scrollDuration = 400;
const scrollPause = 0; // Sets how much you must scroll before changing the slide
// const scrollInterval = 5; // Time (seconds) before you can scroll again

function scroll(direction) {
if (scrolling == false) {
scrolling = true;
$('html, body').animate({
scrollLeft: direction == 'left' ? $('html,body').scrollLeft() - $('.slide').innerWidth() : $('html,body').scrollLeft() + $('.slide').innerWidth()
}, scrollDuration, function() {
scrolling = false;
});
}
}

$(document).scrollTop(0);
$(window).on('wheel', function(e) {
if (scrolling == false) {
scrolled++;
}
if (scrolled > scrollPause) {
if (e.originalEvent.deltaY < 0) { // scrolling down
scroll('left');
scrolled = 0;
}
if (e.originalEvent.deltaY > 0) { // scrolling up
scroll('right');
scrolled = 0;
}
}
});

$('.slide').mouseover(function() {
if (scrolling == false) {
$('html, body').animate({
scrollLeft: $(this).offset().left
}, 100);
}
});

$('.left').click(function() {
scroll('left');
scrolled = 0;
});
$('.right').click(function() {
scroll('right');
scrolled = 0;
});

$(document).scroll(function() {
if ($(document).scrollLeft() == 0) {
$('.left').css({
'opacity': 0,
'transform': 'translateX(-100%)'
})
} else {
$('.left').css({
'opacity': 1,
'transform': 'translateX(0)'
})
}
if ($(document).scrollLeft() == $('.slide-container').innerWidth() + $('.slide').innerWidth()) {
$('.right').css({
'opacity': 0,
'transform': 'translateX(100%)'
})
} else {
$('.right').css({
'opacity': 1,
'transform': 'translateX(0)'
})
}
});

$(document).keydown(function(e) {
switch(e.keyCode) {
case 39:
case 40:
scroll('right');
break;
case 37:
case 38:
scroll('left');
break;
}
});

CSS

body {
font-family: 'Roboto', sans-serif;
overflow-y: hidden;
border: 1px solid red;
}

*{margin: 0; padding: 0;}

.container {border: 1px solid yello;}
.horizontal{
overflow-x: auto;
overflow-y: hidden;
}
.header{
position: fixed;
width: 100vw;
text-align: center;
border: 1px solid yellow;
}

.left {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,1);
opacity: 0;
transition: background 0.15s ease;
opacity 0.5s ease;
transform 0.5s ease;
}
.left:hover{background: lightgrey;}

.right{
position: fixed;
top: 0;
right: 0;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,.5);
transition: background 0.15s ease;
}
.right:hover{background: lightgrey}

.slide-container{
display: flex;
height: 100vh;
flex-wrap: nowrap;
align-items: center;
}
.slide{
flex: 0 0 100%;
height: 100%;
text-align: center;
font-size: 50px;
line-height: calc(100vh - 50px);
overflow: hidden;
}
.slide:nth-child(odd){
background: limegreen;
}
.slide:nth-child(even){
background: lightblue;
}

HTML

<div class="continer">
<div class="header">
<h1 class="title"> Horizontal Scrolling </h1>
<span>(Use Mousewheel)</span>
</div>

<span class="left">left</span>
<span class="right">right</span>

<div class="slide-container">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
<div class="slide">D</div>
<div class="slide">E</div>
</div>
</div><!--continer ends here-->

Answer 1

这不是问题的答案，因为鼠标滚轮在幻灯片之间移动至少在当前浏览器(Windows10上的Edge(上是可以的，但我把问题中的代码作为一个片段放在这里，这样其他人就可以在其他环境中轻松尝试。

var scrolling = false;
var scrolled = 0;
const scrollDuration = 400;
const scrollPause = 0; // Sets how much you must scroll before changing the slide
// const scrollInterval = 5; // Time (seconds) before you can scroll again

function scroll(direction) {
if (scrolling == false) {
scrolling = true;
$('html, body').animate({
scrollLeft: direction == 'left' ? $('html,body').scrollLeft() - $('.slide').innerWidth() : $('html,body').scrollLeft() + $('.slide').innerWidth()
}, scrollDuration, function() {
scrolling = false;
});
}
}

$(document).scrollTop(0);
$(window).on('wheel', function(e) {
if (scrolling == false) {
scrolled++;
}
if (scrolled > scrollPause) {
if (e.originalEvent.deltaY < 0) { // scrolling down
scroll('left');
scrolled = 0;
}
if (e.originalEvent.deltaY > 0) { // scrolling up
scroll('right');
scrolled = 0;
}
}
});

$('.slide').mouseover(function() {
if (scrolling == false) {
$('html, body').animate({
scrollLeft: $(this).offset().left
}, 100);
}
});

$('.left').click(function() {
scroll('left');
scrolled = 0;
});
$('.right').click(function() {
scroll('right');
scrolled = 0;
});

$(document).scroll(function() {
if ($(document).scrollLeft() == 0) {
$('.left').css({
'opacity': 0,
'transform': 'translateX(-100%)'
})
} else {
$('.left').css({
'opacity': 1,
'transform': 'translateX(0)'
})
}
if ($(document).scrollLeft() == $('.slide-container').innerWidth() + $('.slide').innerWidth()) {
$('.right').css({
'opacity': 0,
'transform': 'translateX(100%)'
})
} else {
$('.right').css({
'opacity': 1,
'transform': 'translateX(0)'
})
}
});

$(document).keydown(function(e) {
switch(e.keyCode) {
case 39:
case 40:
scroll('right');
break;
case 37:
case 38:
scroll('left');
break;
}
});

body {
font-family: 'Roboto', sans-serif;
overflow-y: hidden;
border: 1px solid red;
}

*{margin: 0; padding: 0;}

.container {border: 1px solid yello;}
.horizontal{
overflow-x: auto;
overflow-y: hidden;
}
.header{
position: fixed;
width: 100vw;
text-align: center;
border: 1px solid yellow;
}

.left {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,1);
opacity: 0;
transition: background 0.15s ease;
opacity 0.5s ease;
transform 0.5s ease;
}
.left:hover{background: lightgrey;}

.right{
position: fixed;
top: 0;
right: 0;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,.5);
transition: background 0.15s ease;
}
.right:hover{background: lightgrey}

.slide-container{
display: flex;
height: 100vh;
flex-wrap: nowrap;
align-items: center;
}
.slide{
flex: 0 0 100%;
height: 100%;
text-align: center;
font-size: 50px;
line-height: calc(100vh - 50px);
overflow: hidden;
}
.slide:nth-child(odd){
background: limegreen;
}
.slide:nth-child(even){
background: lightblue;
}
HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="continer">
<div class="header">
<h1 class="title"> Horizontal Scrolling </h1>
<span>(Use Mousewheel)</span>
</div>

<span class="left">left</span>
<span class="right">right</span>

<div class="slide-container">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
<div class="slide">D</div>
<div class="slide">E</div>
</div>
</div><!--continer ends here-->