scroll wheel is zooming instead of scrolling

We're just about to reimplement in Angular 7, so this feature will hopefully end up in whatever upstream component we use, and code won't require any unpicking. There is also a scroll handler on the overlay div that will hide immediately if CTRL+scroll occurs as a way of dismissing that message. Based on the toggle click, how i change this behavior so that instead of zoom, the scroll will fire and i will be able to load images one after the other (based on. In canvas, the default behavior will be zoom if we move the mouse wheel up or down. If it triggers without CTRL we set a class on it's parent which shows the overlay div. There will be a toggle button in the screen (inside the canvas) with 2 options ( Scroll vs Zoom). I'm using MapBox via an AngularJS component, so most of the code isn't of a lot of use, but if you are still interested I'll unpick it from the rest of our component for you to have a look at.īasically, we put an wheel event listener on the map. Since we've sorted out all of the correct event listeners on each of the elements things have worked well. This behavior is independent of the Single Page Mode setting. Where I hit issues was that we show a div over the map with a message if CTRL isn't held down, but if you then started CTRL+Scrollwheel before that message had disappeared then the event caused the zoom action. Continuous Mode: Sets the mouse wheel behavior in continuous mode.

Scroll wheel is zooming instead of scrolling