How do I disable mouse interactions or scrolling in an open maps iframe? I have the following and I put the attribute scrollwheel="false" Is there a way via css that can disable scrolling or interactions via css?

<iframe id= "mapsource" scrollwheel="false" src=".html?bbox=-123.21233510971068%2C49.260691198361066%2C-123.18484783172607%2C49.27329289319553&amp;layer=mapquest&amp;marker=49.26699244809891%2C-123.19858074188232"></iframe>

I am open to other options such as using javascript instead to disable scrolling?

How do I disable mouse interactions or scrolling in an open maps iframe? I have the following and I put the attribute scrollwheel="false" Is there a way via css that can disable scrolling or interactions via css?

<iframe id= "mapsource" scrollwheel="false" src="http://www.openstreetmap/export/embed.html?bbox=-123.21233510971068%2C49.260691198361066%2C-123.18484783172607%2C49.27329289319553&amp;layer=mapquest&amp;marker=49.26699244809891%2C-123.19858074188232"></iframe>

I am open to other options such as using javascript instead to disable scrolling?

• javascript
• html
• css
• maps

• The HTML attribute seems to have been working for you. You were just looking for a method using JavaScript? I am looking for a simple method for disabling scrolling and adding a HTML attribute would be the most trivial. The code copied from OSM includes a scrolling="no" attribute but neither no nor yes have any effect. Same with the scrollwheel attribute from your question. Where did you get that from? – Daniel Böhmer Commented Nov 3, 2019 at 10:06

4 Answers 4

Try pointer-events: none;

#mapsource {
  pointer-events: none;
  }

<iframe id= "mapsource" scrollwheel="false" src="http://www.openstreetmap/export/embed.html?bbox=-123.21233510971068%2C49.260691198361066%2C-123.18484783172607%2C49.27329289319553&amp;layer=mapquest&amp;marker=49.26699244809891%2C-123.19858074188232"></iframe>

If the controls (zoom in button, zoom out button etc) are important for you,you could use something like below.

# The magic - set the pointer-events to none to simply disable the
# scrolling on the map BUT NOT the functionality of the buttons!
# This happens only using leaflet api!
<style>
    #map {
        width: 100%;
        height: 300px;
        pointer-events: none;
    }
</style>

# The map element
<div id="map"></div>

# The css link from leaflet
<link rel="stylesheet" href="https://unpkg./[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
# The js link from leaflet
<script src="https://unpkg./[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

# Custom source code to initialize the map
<script>
    var mymap = L.map("map").setView([37.980114, 23.729924], 17);
    L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);
    L.marker([37.980114, 23.729924]).addTo(mymap);

</script>

I wanted to do the same. Disable mouse scroll but keep everything else functional. Options here either pletely disabled map, or they didn't work at all.

I ended up having to use Leaflet, which is a library that integrates with Open Street Maps. It's light, quick and easy. Follow their Quick Start guide to set up your map.

To disable scroll, you must pass the Option argument {scrollWheelZoom:false} when you initialize the map, like so:

var mymap = L.map('mapid', {scrollWheelZoom:false}).setView([51.505, -0.09], 13);

There is a method - https://venues.here./documentation/sdk/v1/example/disable-zoom-wheel-scroll

map.scrollWheelZoom.disable();

This implementation also works fine but with the first example you can use it conditionally

L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
        scrollWheelZoom: false,   
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);