3

Edited 6/19/2015

I have a custom leaflet control box with a drop down menu. When I use the scroll wheel over the menu, the map changes zoom level instead of scrolling the menu. The problem occurs on IE and Firefox, but not Chrome.

How can I let the user operate the drop menus with their scroll wheel, when their cursor is over the menu?

enter image description here

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
        <style type="text/css">
            #map { height: 500px; }
            #legend { background: #FFF;}
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            var map = L.map('map').setView([51.505, -0.09], 13);

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

            var legend = L.control({position: "topright"});

            legend.onAdd = function (map) {
                var div = L.DomUtil.create('div', 'legend');
                div.innerHTML = '<h1>Title</h1><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option></select>';
                div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
                L.DomEvent.disableClickPropagation(div);
                return div;
            };
            legend.addTo(map);
        </script>
    </body>
</html>
5

I've been stuck on an issue quite similar to yours by having a custom control with a scrollable div inside.

At least a partial solution can be achieved by using lines like this:

var elem = L.DomUtil.get('yourelementid');
L.DomEvent.on(elem, 'mousewheel', L.DomEvent.stopPropagation);

where elem is the element that's laid out over the map.

This prevents the map from being zoomed by scrolling the mouse wheel, but it is only a partial solution because it also prevents the scrolling inside the custom control. However, I'm not really sure how it acts on a dropdown like yours, so you might want to give it a try!

  • Thanks for your help. I had to add a new id to the parent div that contains the custom control I added. – NHorner Jul 21 '15 at 18:03
  • You're welcome! Glad to be of help! And yes, L.DomUtil is no jQuery, but does the trick :) – Kiikonen Jul 22 '15 at 5:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.