Tengo un problema con mi scrollsnapping que se interpone en el camino de mi barra de desplazamiento personalizada. Tan pronto como elimine el comentario del ajuste de desplazamiento (coméntelo, para que vea cómo debería verse, pero con el ajuste de desplazamiento activado :)) en mi contenedor, la barra de desplazamiento personalizada ya no funciona. De alguna manera no se llevan bien entre ellos, mientras trabajan solos.
Si alguien tiene alguna idea de cómo solucionarlo, hágamelo saber :).
Ten un excelente fin de semana
* { 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>