-2

I'm having a problem with disable scrolloing on iframe of Google My Maps (custom maps). Since this has also clickable events I cannot use CSS "pointer-events:none". I tried also "scrolling:no" on the iframe itself, but both this methods doesn't work. I finally use a javascript as.

<script>
    $(".map").bind("mousewheel", function() {
        return false;
    });
</script>

And it works, but when I click in one of the links start scrolling again. How can I disable scrolling definetly but still use the clickable events.

Jose Borges
  • 340
  • 2
  • 4
  • 14

1 Answers1

1

A working example:

<!DOCTYPE html>
<html>
<head>
<style>
    .scrolloff {
        pointer-events: none;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        $('#map').addClass('scrolloff');                // set the mouse events to none when doc is ready

        $('#overlay').on("mouseup",function(){          // lock it when mouse up
            $('#map').addClass('scrolloff'); 
            //somehow the mouseup event doesn't get call...
        });
        $('#overlay').on("mousedown",function(){        // when mouse down, set the mouse events free
            $('#map').removeClass('scrolloff');
        });

        $("#map").mouseleave(function () {              // becuase the mouse up doesn't work... 
            $('#map').addClass('scrolloff');            // set the pointer events to none when mouse leaves the map area
                                                        // or you can do it on some other event
        });

    });
</script>
</head>
<body>
<div id="overlay" class="map">
    <iframe id="map" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
    &q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
</div>

</body>
</html>

Live demo: http://kylelam.github.io/iframe.html

Bas Matthee
  • 116
  • 7
  • Can you post a snippet of the code that you use on your page? – Bas Matthee Jul 11 '19 at 13:11
  • 1
    @BasMatthee Got your idea, "addClass" to insist on keep the mousewheel not scrolling. Thank you! When I have a click event, I call again $(".map").bind("mousewheel", function() { return false; }); – Jose Borges Jul 11 '19 at 13:50