i have a problem with my scrollsnapping coming in the way of my custom scrollbar. As soon as i uncomment the scrollsnaping (commentet it, so you see how it should look like, but with scroll snapping on :) ) in my container the custom scrollbar is not working anymore. Somehow they dont get along with each other, while on their own they work.
If someone has any clue how to fix it let me know :).
Have a great weekend
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 0;
}
#scrollpath {
z-index: 1;
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: #3D3D3D;
}
#progressbar {
z-index: 1;
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 0%;
border-radius: 10px;
background: #000;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
background: #000;
}
.container {
width: 100%;
height: 100%;
# scroll-snap-type: y mandatory;
# overflow-y: scroll;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 200px 20vw;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.test {
position: absolute;
width: 100%;
height: 100vh;
background: #fff;
}<html>
<body>
<div id ="scrollpath"></div>
<div id ="progressbar"></div>
<div class = "container">
<section>
</section>
<section>
<div class="test" id="test">
</div>
</section>
<section>
</section>
</div>
<script type="text/javascript">
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function(){
let progressHeight = (window.pageYOffset / totalHeight) * 100;
progress.style.height = progressHeight + "%";
}
</script>
</body>
</html>