jQuery and CSS Horizontal scrolling

Question

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

});

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)

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>

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