La rueda del mouse se amplía solo después de hacer clic en el mapa

Estoy trabajando con la Biblioteca JavaScript de folleto y adjunté un mapa (de trabajo) a mi documento HTML. Está en el medio de la página, y cuando me desplazo hacia abajo con la rueda del mouse y llego al mapa, se acerca automáticamente al mapa.

Quiero desplazarme por la página sin parar en el mapa. ¿Hay alguna forma de activar el zoom de la rueda solo después del primer clic en el mapa?

Es simple: cree L.Map con scrollWheelZoom: falseopción, luego agregue un oyente:

map.once('focus', function() { map.scrollWheelZoom.enable(); });

Si necesita alternar el zoom:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

Más comentarios / mejoras en el componente de alternancia de la respuesta aceptada , lo cual es genial (gracias). Pero.

Al interactuar con un mapa, para muchos casos de uso, el usuario también debe hacer clic en el mapa para realizar su tarea, por lo que esto:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

Puede provocar un comportamiento inesperado una vez que el usuario comienza a utilizar el mapa.

Sugeriría algo que puede parecer un poco más intuitivo para el usuario: haga clic en el mapa para desactivar el desplazamiento del mouse .

Por ejemplo, configure su scrollWheelZoom: falsecomo arriba, luego:

map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });

Leaflet.Sleep facilitará su trabajo, y es muy configurable

Básicamente, desactiva los eventos de desplazamiento cuando no son necesarios y "activa" su mapa cuando lo son.

Publicaría el código, pero los valores predeterminados parecen acertar, por lo que es probable que no necesite nada más <script src="path/to/leaflet-sleep.js"></script>y tendrá un mapa como este .

Puede hacerlo solo con esas 3 líneas:

map.scrollWheelZoom.disable();
map.on('focus', () => { map.scrollWheelZoom.enable(); });
map.on('blur', () => { map.scrollWheelZoom.disable(); });

o:

map.scrollWheelZoom.disable();
this.map.on('click', () => { this.map.scrollWheelZoom.enable();});
this.map.on('mouseout', () => { this.map.scrollWheelZoom.disable();});