Estoy haciendo un sitio web de folletos para una tarea escolar. Para que sea más fácil de usar en dispositivos móviles, moví el menú de control de superposiciones a una barra lateral interactiva, abierta con un <button> (ahora oculto), como este (perdón por algunos textos en checo, pero no deberían ser relevantes para mi problema): capas al abrir la barra lateral .
Si luego me desplazo de esta manera y hago clic en el símbolo dentro de un círculo, la capa se agrega correctamente, pero el nivel de desplazamiento de la barra lateral se restablece al primer estado.
Me gustaría que mi nivel de desplazamiento de la barra lateral permanezca igual después de hacer clic en cualquier símbolo fuera del desplazamiento. Intenté guardar el nivel de desplazamiento al hacer clic y volver a cambiarlo después, pero las transiciones no fueron suaves, incluso con un tiempo de espera mínimo.
¿Hay alguna manera de desactivar esta "actualización de desplazamiento automático"? Me parece que de alguna manera está conectado a Leaflet actualizando la capa mostrada en el mapa, pero sinceramente no lo sé.
Tuve un problema similar con un proyecto, y al final, simplemente reduje la cantidad de botones e hice sus íconos unos píxeles más pequeños, para que cupieran en cualquier iPhone, Samsung, Xiaomi, etc. Daré un ejemplo del proyecto (primeras etapas), y se puede ver el resultado. Descargo de responsabilidad: estoy afiliado a este sitio; es mi sitio web de investigación personal, ¡pero no hay spam allí! Zona libre de peligro garantizada, LOL! Mírelo, en la computadora portátil y el teléfono, y vea la diferencia y el código fuente. Mapa de folletos de la antigua Roma, primeros comienzos durante la época del rey Rómulo
Entonces resulta que mi idea original de guardar la posición de desplazamiento y actualizarla después de hacer clic era la forma correcta de hacerlo, solo necesitaba ajustar el scroll-behavior propiedad CSS. Aquí hay parte de mi código que muestra la solución completa para cualquier persona que pueda tener el mismo problema:
Folleto:
(una capa de superposición, que forma parte del diccionario de overlays , que luego se usa como entrada para L.control.layers )
// previous overlay layers above "<table><tr><th><img src='./img/graves.png' onclick='resetScroll()'/></th><td><p>hrobky</p></td></tr></table>":L.geoJSON(graves).setStyle({ color: "#669999", weight: "1", fillColor: "#669999", fillOpacity: "0.5" }), // remaining overlay layers below Función JS llamada onClick en <img> elementos que usé para activar/desactivar capas:
function resetScroll() { let scroll_position = document.querySelector(".leaflet-control-layers-scrollbar").scrollTop; window.setTimeout(() => { document.querySelector(".leaflet-control-layers-scrollbar").scrollTop = scroll_position; }, 1); }CSS :
.leaflet-control-layers-scrollbar { scroll-behavior: smooth; }Sé que este podría no ser el método más eficiente o elegante de hacer lo que quería, pero funciona de todos modos.