Déplacement de la molette de la souris uniquement après avoir cliqué sur la carte

19

Je travaille avec la bibliothèque JavaScript de Leaflet et j'ai joint une carte (de travail) à mon document HTML. Il se trouve au milieu de la page, et lorsque je défile avec la molette de la souris et que j'arrive à la carte, il zoome automatiquement sur la carte.

Je veux faire défiler la page sans m'arrêter sur la carte. Existe-t-il un moyen d'activer le zoom de la roue uniquement après le premier clic sur la carte?

— Jandroide
source

27

C'est simple: créez L.Map avec scrollWheelZoom: falseoption, puis ajoutez un écouteur:

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

Si vous devez basculer le zoom:

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

— Ilja Zverev
source

Merci :) J'ai commencé un commentaire pour cela mais je suis devenu trop gros alors mettez la réponse ci-dessous .

— danwild

13

Plus d'un commentaire / amélioration sur le composant bascule de la réponse acceptée , ce qui est super (merci). Mais.

Lors de l'interaction avec une carte, pour de nombreux cas d'utilisation, l'utilisateur doit également cliquer sur la carte pour effectuer sa tâche, donc ceci:

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

Peut entraîner un comportement inattendu une fois que l'utilisateur commence réellement à utiliser la carte.

Je suggérerais quelque chose qui peut sembler un peu plus intuitif à l'utilisateur - cliquez sur la carte pour désactiver le défilement de la souris .

Par exemple, définissez votre scrollWheelZoom: falsecomme ci-dessus, puis:

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

— danwild
source

1

L'utilisation de focus/ blurrend la fonctionnalité de carte beaucoup plus intuitive.

— doublesharp

D'accord. L'approche focus / flou est excellente. Merci!

— sstringer

Très bien, mais a besoin d'un moyen pour désactiver le défilement si la carte est en plein écran et que l'utilisateur fait défiler rapidement vers l'intérieur et vers l'extérieur (en effectuant plusieurs changements de direction en une seconde). Ce défilement ascendant et descendant confus se produit lorsqu'ils sont bloqués et ne peuvent pas quitter la carte du navigateur complet pour accéder au contenu au-dessus ou en dessous.

— Loren

6

Leafle.Sleep rendra votre travail facile, et il est largement configurable

Fondamentalement, il désactive les événements de défilement lorsqu'ils ne sont pas nécessaires et "réveille" votre carte lorsqu'ils le sont.

Je publierais du code, mais les valeurs par défaut semblent le faire correctement, vous n'aurez donc probablement pas besoin de quoi que ce soit au <script src="path/to/leaflet-sleep.js"></script>- delà et vous aurez une carte comme celle-ci .

— user3276552
source

0

Vous pouvez le faire uniquement par ces 3 lignes:

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

ou:

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

— ofir_aghai
source