I have been experimenting with creating a horizontal scrolling page that moves to the right when scrolling down and to the left when scrolling up. Here is the current code:
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;
});
});
The current setup works, but it lacks smoothness. Additionally, it encounters problems when reaching the ends of the sections. I am aiming for a smooth scrolling experience similar to this website:
Any suggestions or assistance would be greatly appreciated.
UPDATE
I managed to achieve smoother scrolling with this adjusted code:
$(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;
});
});
However, the issue of getting stuck at the beginning and end of sections persists. When scrolling back to the beginning of section-1, it requires scrolling down to resume smooth scrolling. Similarly, when reaching the end of section-5, the scrolling continues. Any further advice on resolving these issues is welcome.