jQuery 和 CSS 水平滚动

Question

我正在尝试将一个水平页面放在一起，当您向下滚动鼠标时，您会向右滚动，如果您向上滚动鼠标，则会向左滚动。

这是我到目前为止得到的：

HTML

<div class="scroll-sections">
            <section id="section-1">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Section 1</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section id="section-2">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Section 2</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section id="section-3">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Section 3</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section id="section-4">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Section 4</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section id="section-5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Section 5</h1>
                        </div>
                    </div>
                </div>
            </section>
        </div>

CSS

section {
    height: 100vh;
    padding-left: 125px;
    display: inline-block;
    z-index: 2;
    overflow: visible;
    white-space: nowrap;
}

.scroll-sections {
    padding: 0;
    list-style: none;
    font-size: 0;
    margin: 0;
    white-space: nowrap;
    height: 100%;
    position: relative;
    overflow: visible;
}

jQuery

$(document).ready(function(){
  var pos = 0;
  $(".scroll-sections").bind('mousewheel DOMMouseScroll', function(event) {
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
      pos = pos + 50;

    } else {

      pos = pos - 50;
    }
    $(".scroll-sections").css({left: pos});
    return false;
  });

});

这有点工作，但它一点也不流畅，当我到达第 5 节的末尾时，它一直在滚动，当我滚动回第 1 节的开头时，它卡住了，我必须向下滚动才能让它再次运行。

我正在尝试顺利运行并像这样运行：

https://homesociete.ca/en/

任何帮助，将不胜感激

更新

我让它运行更顺畅：

$(document).ready(function(){
  var pos = 0;
  $(".scroll-sections").bind('mousewheel DOMMouseScroll', function(event) {
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
      pos = pos + 10;

    } else {

      pos = pos - 10;
    }
    $(".scroll-sections").css({left: pos});
    return false;
  });

});

但是开头也有同样的问题（当我滚动回第 1 节的开头时，它卡住了，我必须向下滚动才能让它再次运行）和结束（当我到达第 5 节的末尾时，它会继续滚动）

Answer 1

 $(document).ready(function(){ var pos = 0; var lastElement = $(".scroll-sections").children().last(); var maxScroll = $(".scroll-sections").width() - (lastElement.offset().left + lastElement.outerWidth()); $(".scroll-sections").on('wheel', function(event) { pos = pos + (event.originalEvent.wheelDelta/3); if(pos > 0 ){ pos = 0; } if(pos < maxScroll){ pos= maxScroll; } $(".scroll-sections").css({'transform': 'translateX(' + pos + 'px)'}); return false; }); });

 html, body{ margin: 0px; overflow: hidden; } section { height: 99vh; display: inline-block; width: 33.3%; border: 1px solid red; overflow: visible; }.scroll-sections { white-space: nowrap; height: 100%; overflow: visible; transition-duration: 0.5s; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="scroll-sections"> <section id="section-1"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Section 1</h1> </div> </div> </div> </section> <section id="section-2"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Section 2</h1> </div> </div> </div> </section> <section id="section-3"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Section 3</h1> </div> </div> </div> </section> <section id="section-4"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Section 4</h1> </div> </div> </div> </section> <section id="section-5"> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Section 5</h1> </div> </div> </div> </section> </div>

请找到随附的示例。它具有水平滚动，可以根据要求进行相同的调整。