0
219
VistasLa propiedad CSS snap scroll ajusta el principio y el final del sitio web
El snap-scroll funciona bien cuando se desplaza a través de los divs, pero el sitio web se desplaza más allá del último div , siempre y cuando siga desplazándose hacia abajo y viceversa, más allá del primer div , si continúa desplazándose hacia arriba .
Idealmente, el sitio web no debe continuar desplazándose más allá de la primera y la última división y, en su lugar, debe recuperarse hasta la primera y la última división.
Aquí está el enlace de codesandbox . Para reproducir el problema, el sitio web debe abrirse en una nueva ventana con el botón de la extrema derecha resaltado a continuación.
Nota
Reproducible en Chrome, Brave, Edge, Opera y no en Safari y Firefox.
Código
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> html { scroll-snap-type: y mandatory; } body { margin: 0; } div { width: 100vw; height: 100vh; scroll-snap-align: start; } </style> </head> <body> <div></div> <div></div> <div></div> </body> <script> const colors = ["red", "green", "blue"]; document.querySelectorAll("div").forEach((div, index) => { div.style.backgroundColor = colors[index]; }); </script> </html>
·
Juan Pablo Isaza
Responde la pregunta