Snippets / JS
JS
Prevent Map Zoom Scroll
S
Steven Ellis
·
258 views
·
Updated 1 year ago
Voxel Ticket ref: https://getvoxel.io/questions/mapbox-prevent-scroll-on-desktop
I wanted to share this to help any others in the future.
I wanted to share this to help any others in the future.
Google Maps gesture handling: cooperative
REF: https://gist.github.com/albionselimaj/2ea27c55efaaf31ff37e39f62bddcea6
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', () => {
jQuery(document).on( 'maps:loaded', () => {
Array.from( document.querySelectorAll('.ts-map') ).forEach( el => {
let i = setInterval( () => {
if ( el.__vx_map__ ) {
el.__vx_map__.map.setOptions( { gestureHandling: 'cooperative' } );
clearInterval(i);
}
}, 250 );
} );
} );
} );
</script>
JS · 27 lines
Mapbox gesture handling: cooperative
REF: https://gist.github.com/albionselimaj/6a93fdae786f44c80d63e61427576b73
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', () => {
jQuery(document).on( 'maps:loaded', () => {
Array.from( document.querySelectorAll('.ts-map') ).forEach( el => {
let i = setInterval( () => {
if ( el.__vx_map__ ) {
let map = el.__vx_map__.map;
map._cooperativeGestures = true;
map.handlers._handlersById.touchPan.enable();
map.handlers._handlersById.scrollZoom._addScrollZoomBlocker();
clearInterval(i);
}
}, 250 );
} );
} );
} );
</script>
JS · 33 lines
Mapbox gesture handling: cooperative with no overlay instructions
REF: https://codefile.io/f/DY1FBQkH83
document.addEventListener( 'DOMContentLoaded', () => {
jQuery(document).on( 'maps:loaded', () => {
Array.from( document.querySelectorAll('.ts-map') ).forEach( el => {
let i = setInterval( () => {
if ( el.__vx_map__ ) {
let map = el.__vx_map__.map;
map._cooperativeGestures = true;
map.handlers._handlersById.touchPan.enable();
map.handlers._handlersById.scrollZoom._addScrollZoomBlocker();
map.scrollZoom.setWheelZoomRate(0); // Disable zoom with mouse wheel completely
map.scrollZoom.setZoomRate(0); // Disable zooming with ctrl + wheel completely
map.scrollZoom.disable(); // Disable scroll zoom entirely
clearInterval(i);
}
}, 250 );
} );
} );
} );
JS · 18 lines
Discussion 1
Ask a question or share how you used this.
Log in
to join the discussion.
smirceamihai
1 year ago
The ticket is private. No way to see what the issue was
Steven Ellis
1 year ago
Hello, The issue was I was looking a solution to prevent the map from zooming in when a cursor is over the map and the user scrolls the page. I have added a screenshot of my ticket in the Voxel Support. Thanks