javascript - 当 Bootstrap 轮播水平滚动到其最后一个子项时，如何滚动到页面的下一部分

Question

HTML

<div id="slider" class="carousel slide" data-ride="carousel">
    <!-- The slideshow -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <h1>lorem</h1>
        </div>
        <div class="carousel-item">
           <h1>lorem</h1>
        </div>
        <div class="carousel-item">
            <h1>lorem</h1>
        </div>
    </div>

    <ul class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0" class="item0 active"></li>
        <li data-target="#slider" data-slide-to="1" class="item1"></li>
        <li data-target="#slider" data-slide-to="2" class="item2"></li>
    </ul>
</div>

JS

$('#slider').bind('mousewheel', function(e){
    e.preventDefault();

    if(e.originalEvent.wheelDelta /120 > 0) {
        $(this).carousel('prev');
    }
    else if ($("#slider .carousel-inner .carousel-item:last").hasClass("active")) {
        e.stopPropagation();
    }
    else{
        $(this).carousel('next');
    }
});

这里，mouseweel 事件监听器正在将 Bootstrap 轮播移动到下一个 slider 。当轮播到达最后一张幻灯片时，如何将页面滚动到下一部分。提前致谢!

Answer 1

您应该使用 $('#slider').off('mousewheel');，而不是 e.stopPropagation();。然而，这里也有一些事情需要注意:

• 首先，.bind() 自 jQuery 3.0 起已被弃用，因此您不应再使用它。使用 .on() 来绑定(bind)事件监听器。
• 其次，mousewheel 事件的第二个参数是可用的增量值。因此，您可以简单地使用它，而不是使用 e.originalEvent.wheelDelta。
• else if 的 CSS 选择器中的 .carousel-inner 部分是不必要的，因为 #slider .carousel-item 已定位所需的元素。
• 仅供引用:在这种情况下，当您将结果与零进行比较时，wheelDelta/120 除法完全没有用。

所以你的脚本可能看起来像这样:

$('#slider').on('mousewheel', function(e, delta) {
    e.preventDefault();

    if (delta > 0) {
        $(this).carousel('prev');
    }
    else if ($("#slider .carousel-item:last").hasClass("active")) {
        // e.stopPropagation();
        $('#slider').off('mousewheel');
    }
    else {
        $(this).carousel('next');
    }
});

前面的工作片段:

$('#slider').on('mousewheel', function(e, delta) {
    e.preventDefault();
    if (delta > 0) {
        $(this).carousel('prev');
    }
    else if ($("#slider .carousel-item:last").hasClass("active")) {
        // e.stopPropagation();
        $('#slider').off('mousewheel');
    }
    else {
        $(this).carousel('next');
    }
});

body {
    height: 200vh;
    background-color: #E6E6FA !important;
}

#slider {
    background-color: grey;
}

<div id="slider" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <h1>lorem</h1>
        </div>
        <div class="carousel-item">
           <h1>lorem</h1>
        </div>
        <div class="carousel-item">
            <h1>lorem</h1>
        </div>
    </div>

    <ul class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0" class="item0 active"></li>
        <li data-target="#slider" data-slide-to="1" class="item1"></li>
        <li data-target="#slider" data-slide-to="2" class="item2"></li>
    </ul>
</div>



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>