javascript - 第二张幻灯片后，下一张幻灯片不滚动

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-->

标签： javascripthtmljquerycss

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-->