I made script where on scroll it jumps to another div(with animation). I just removed normal scrolling function by adding overflow: hidden; into the body and add function where I used ScrollIntoView(). Everything is working fine on mozilla, but no longer on Opera and Chrome.
This is the view of the page at the beginning:
And this is the view of the page after scrolling:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.3.min.js"></script>
<style>
html, body {
height: 100%;
}
body {
margin: 0 auto !important;
background-color: #1e1e1e;
overflow: hidden;
}
.main {
float: left;
width: 100%;
height: 100%;
position: relative;
background: url("main.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.start {
float: left;
width: 100%;
height: 100%;
position: relative;
background: url("main.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.cennik {
float: left;
width: 100%;
height: 100%;
position: relative;
background: url("main.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.uslugi {
float: left;
width: 100%;
height: 100%;
position: relative;
background: url("main.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.student {
float: left;
width: 100%;
height: 100%;
position: relative;
background: url("main.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.kontakt {
float: left;
width: 100%;
height: 100%;
position: relative;
background: url("main.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="main" id="main"></div>
<div class="start" id="start"></div>
<div class="cennik" id="cennik"></div>
<div class="uslugi" id="uslugi"></div>
<div class="student" id="student"></div>
<script>
var scrollableElement = document.body; //document.getElementById('scrollableElement');
scrollableElement.addEventListener('wheel', checkScrollDirection);
function checkScrollDirection(event) {
var hash = window.location.hash.substr(1);
if (checkScrollDirectionIsUp(event)) {
switch(hash) {
case 'main':
break;
case 'start':
document.getElementById('main').scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });
window.history.pushState({}, '', '#main');
var hash = 'main';
break;
case 'cennik':
document.getElementById('start').scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });
window.history.pushState({}, '', '#start');
var hash = 'start';
break;
case 'uslugi':
document.getElementById('cennik').scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });
window.history.pushState({}, '', '#cennik');
var hash = 'cennik';
break;
case 'student':
document.getElementById('uslugi').scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });
window.history.pushState({}, '', '#uslugi');
var hash = 'uslugi';
break;
default:
break;
}
} else {
switch(hash) {
case 'main':
document.getElementById('start').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'end' });
window.history.pushState({}, '', '#start');
var hash = 'start';
break;
case 'start':
document.getElementById('cennik').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'end' });
window.history.pushState({}, '', '#cennik');
var hash = 'cennik';
break;
case 'cennik':
document.getElementById('uslugi').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'end' });
window.history.pushState({}, '', '#uslugi');
var hash = 'uslugi';
break;
case 'uslugi':
document.getElementById('student').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'end' });
window.history.pushState({}, '', '#student');
var hash = 'student';
break;
case 'student':
break;
default:
document.getElementById('start').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'end' });
window.history.pushState({}, '', '#start');
var hash = 'start';
break;
}
}
}
document.body.addEventListener("touchmove", function (e) {
console.log(prevScrollPos - e.changedTouches[0].clientY);
prevScrollPos = e.changedTouches[0].clientY;
});
function checkScrollDirectionIsUp(event) {
if (event.wheelDelta) {
return event.wheelDelta > 0;
}
return event.deltaY < 0;
}
</script>
</body>
</html>
As I see, the problem here is the animation. Without animation it works perfect but as you can imagine, it looks ugly.
I tried to change ScrollIntoView() to ScroolTop but animation wasn’t working for me.
Also tried to make in in jquery but I don’t think I doing it correctly.