This codes excplains better what I am looking for than describing it here. I’m just looking for a library that does the job but maybe with more flexability.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scroller demo</title>
<style>
/* Scroller Styles */
body {
margin: 0;
font-size: 40px;
}
.body {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
/* Custom Styles */
.section-1 {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
width: calc(100vw - var(--scrollbar-width));
background-color: rgba(255,0,0,.5);
border: 5px solid red;
}
.section-2 {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: calc(100vw - var(--scrollbar-width));
background-color: rgba(0,255,0,.5);
border: 5px solid green;
}
.section-3 {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
width: calc(100vw - var(--scrollbar-width));
background-color: rgba(0,0,255,.5);
border: 5px solid blue;
}
.section-4 {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: calc(100vw - var(--scrollbar-width));
background-color: rgb(255,165,0, .5);
border: 5px solid orange;
}
.section-5 {
position: relative;
overflow: hidden;
height: 200px;
width: calc(100vw - var(--scrollbar-width));
}
.section-5s {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 3840px;
height: calc(100% - 10px);
background-image: url('background.png');
background-size: cover;
background-position: top center;
border: 5px solid yellow;
}
.section-6 {
display: flex;
justify-content: center;
align-items: center;
height: 2000px;
width: calc(100vw - var(--scrollbar-width));
background-color: rgba(238, 102, 102, 0.5);
border: 5px solid gray;
}
</style>
</head>
<body>
<section class="section-1">NORMAL</section>
<section class="section-2">SLOW</section>
<section class="section-3">PAUSE</section>
<section class="section-4">SLOW</section>
<section class="section-5">
<div class="section-5s">HORIZONTAL</div>
</section>
<section class="section-6">NORMAL</section>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>
$(document).ready(function(){
function tracking(tracks){
// Calculate track and screen lengths for each block
var tracks_length = 0;
var screen_length = 0;
for (idx in tracks){
tracks[idx]['number'] = idx;
// Pause Scroll
if (tracks[idx]['direction'] == 'pause'){
tracks[idx]['screen_length'] = 0
tracks[idx]['track_length'] = tracks[idx]['element'].outerHeight() * tracks[idx]['speed'];
}
// Horizontal Scroll
if (tracks[idx]['direction'] == 'horizontal'){
tracks[idx]['screen_length'] = 0
tracks[idx]['track_length'] = tracks[idx]['element'].outerWidth() * tracks[idx]['speed'];
}
// Vertical Scroll
if (tracks[idx]['direction'] == 'vertical'){
tracks[idx]['screen_length'] = tracks[idx]['element'].outerHeight();
tracks[idx]['track_length'] = tracks[idx]['element'].outerHeight() * tracks[idx]['speed'];
}
tracks[idx]['screen_top'] = screen_length;
screen_length += tracks[idx]['screen_length'];
tracks[idx]['screen_bottom'] = screen_length;
tracks[idx]['track_top'] = tracks_length;
tracks_length += tracks[idx]['track_length'];
tracks[idx]['track_bottom'] = tracks_length;
}
$('.tracks').css('height', tracks_length);
return tracks;
}
// Define tacking
var tracks = [
{
'direction': 'vertical',
'element': $('.section-1'),
'speed': 1,
},
{
'direction': 'vertical',
'element': $('.section-2'),
'speed': 10,
},
{
'direction': 'pause',
'element': $('.section-3'),
'speed': 5,
},
{
'direction': 'vertical',
'element': $('.section-3'),
'speed': 1,
},
{
'direction': 'vertical',
'element': $('.section-4'),
'speed': 10,
},
{
'direction': 'horizontal',
'element': $('.section-5'),
'speed': 1,
},
{
'direction': 'vertical',
'element': $('.section-5'),
'speed': 1,
},
{
'direction': 'vertical',
'element': $('.section-6'),
'speed': 1,
},
];
// Wrap body content in a fixed element to control
$('body').wrapInner('<div class="body" />');
// Create a track for scrolling
$('body').prepend('<div class="tracks" />');
// Set up tracking
tracks = tracking(tracks);
// Recalculate tracking on browser resize
$(window).resize(function(){
tracks = tracking(tracks);
});
// Detect scrolling and control scrolling
$(window).scroll(function(){
var scroll_poistion = $(window).scrollTop();
// Find section of track your in
var track = false;
for (idx in tracks){
if (
(tracks[idx]['track_top'] <= scroll_poistion) &&
(tracks[idx]['track_bottom'] > scroll_poistion)
){
track = tracks[idx];
break;
}
}
// Find your location within the track from 0 to 1.
var track_percentage = (
scroll_poistion - track['track_top']
) / track['track_length'];
// Extrapolate your screen location from the track and position in it.
var screen_position = (
track_percentage * track['screen_length']
) + track['screen_top'];
// Vertical Position
$('.body').css('top', -screen_position);
// Extrapolate your horizontal position from the track and position in it.
var horizontal_position = 0;
if (track['direction'] == 'horizontal'){
var rung_width = track['element'].outerWidth();
var slider = track['element'].children(':first-child');
var slider_width = slider.outerWidth();
var horizontal_position = (rung_width - slider_width) * track_percentage;
// Horizontal Position
slider.css('left', horizontal_position);
} else {
// Set slide to beginnig or end if before or past element
for (idy in tracks){
if (tracks[idy]['direction'] == 'horizontal'){
if (idy > idx){
tracks[idy]['element'].children(':first-child').css('left', 0);
}
if (idy < idx){
var rung_width = track['element'].outerWidth();
var slider = track['element'].children(':first-child');
var slider_width = slider.outerWidth();
tracks[idy]['element'].children(':first-child').css('left', rung_width - slider_width);
}
}
}
}
});
});
</script>
</body>
</html>
I tried the code above, but it is limited and wont allow centre offset, scroll horizontally to the left instead of right. Its an example of how the scroll bar still works but in a diffrent direction. Also there maybe an issue with hyperlinking into the centre of the page.