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)

Phani · Accepted Answer · 2022-08-25 10:19:12Z

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.

edited Aug 25, 2022 at 10:19

answered Aug 25, 2022 at 10:06

Phani

1291 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user979331 Over a year ago

This is perfect! Is there away to when I scroll down it scrolls to the right? Right now if I scroll up it scrolls to the right and if I scroll down it scrolls to the left? But this is great I will accept your answer.

Phani Over a year ago

We can achieve this changing from adding to subtraction scroll value from pos variable. pos = pos - (event.originalEvent.wheelDelta/3);

Collectives™ on Stack Overflow

jQuery and CSS Horizontal scrolling

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related