I am trying to put together a page that is horizontal and when you scroll down on your mouse, you scroll to the right and if you scroll up on your mouse, you scroll to the left.

Here is what I got so far:

HTML

<div >
            <section id="section-1">
                <div >
                    <div >
                        <div >
                            <h1>Section 1</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section id="section-2">
                <div >
                    <div >
                        <div >
                            <h1>Section 2</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section id="section-3">
                <div >
                    <div >
                        <div >
                            <h1>Section 3</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section id="section-4">
                <div >
                    <div >
                        <div >
                            <h1>Section 4</h1>
                        </div>
                    </div>
                </div>
            </section>
            <section id="section-5">
                <div >
                    <div >
                        <div >
                            <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;
  });

});

This kinda works, but its not smooth at all and when I reach the end of section-5 it keeps scrolling and the I scroll back to the beginning of section-1 it get stuck and I have to scroll down to get it running again.

I am trying to get to run smoothly and run like this:

https://homesociete.ca/en/

Any help would be appreciated

UPDATE

I got it run smoother with this:

$(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;
  });

});

But same issue with the beginning (when I scroll back to the beginning of section-1 it get stuck and I have to scroll down to get it running again)and ending (when I reach the end of section-5 it keeps scrolling)

CodePudding user response：

$(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 >
    <section id="section-1">
        <div >
            <div >
                <div >
                    <h1>Section 1</h1>
                </div>
            </div>
        </div>
    </section>
    <section id="section-2">
        <div >
            <div >
                <div >
                    <h1>Section 2</h1>
                </div>
            </div>
        </div>
    </section>
    <section id="section-3">
        <div >
            <div >
                <div >
                    <h1>Section 3</h1>
                </div>
            </div>
        </div>
    </section>
    <section id="section-4">
        <div >
            <div >
                <div >
                    <h1>Section 4</h1>
                </div>
            </div>
        </div>
    </section>
    <section id="section-5">
        <div >
            <div >
                <div >
                    <h1>Section 5</h1>
                </div>
            </div>
        </div>
    </section>
</div>

Please find the attached example.It has Horizontal scroll, Can tweak same per requirement.