Estoy construyendo una especie de cuadrícula virtual, que colocará el contenido en la ventana gráfica según sea necesario, particularmente en el desplazamiento del usuario.
Pude lograr este tipo de comportamiento con React, pero parece que tengo problemas con svelte.
<script> let scroll; $: height = Math.floor(scroll/200)*200; </script> <svelte:window bind:scrollY={scroll} /> <div class="holder" style="height:{height}px"></div> <div class="box"></div> <style> :global(body) { height: 20000px; } .box { width: 200px; height: 200px; background-color: aqua; } .holder { } </style>A medida que me desplazo, y el div inferior aumenta en altura para elevar el cuadro azul, algo desencadena un desplazamiento adicional, que luego desencadena un aumento de altura adicional que desencadena un desplazamiento adicional.
Básicamente, a medida que se desplaza un poco, la barra de desplazamiento se vuelve loca y se desliza hacia abajo en la PC.
Idealmente, la página debería desplazarse normalmente desde la entrada del usuario.
No estoy seguro de si se trata de un problema con svelte o si se trata de un comportamiento predeterminado del navegador.
Editar: cambie el código y repl para reflejar un poco más mi requisito, lo que muestra por qué la configuración de "posición: fijo" css no funcionaría.
Quite el .holder y en su lugar use position: fixed and top: 8px .
<script> let scroll; </script> <svelte:window bind:scrollY={scroll} /> <div class="box" style="position:fixed;top:8px"></div> <style> :global(body) { height: 20000px; } .box { width: 200px; height: 200px; background-color: aqua; } </style>En su código, establecer la altura del .holder cambia el desplazamiento. Entonces cae en un bucle continuo hasta que se encuentra con el fondo.
<script> let scroll; $: top = Math.floor(scroll/200)*200; </script> <svelte:window bind:scrollY={scroll} /> <div class="box" style="top:{top}px"></div> <style> :global(body) { height: 20000px; } .box { position: absolute; top: 0; width: 200px; height: 200px; background-color: aqua; } </style>Si necesita aumentar la altura, puede hacerlo como sigue el código.
<script> let scroll; $: height = Math.floor((scroll - 1)/200)*200; </script> <svelte:window bind:scrollY={scroll} /> <div class="holder" style="height:{height}px"></div> <div class="box"></div> <style> :global(body) { height: 20000px; } .box { width: 200px; height: 200px; background-color: aqua; } .holder { } </style>