带滚动条的传单上下文菜单

Question

我已将滚动条添加到传单地图中。我们在地图上右击就可以看到了。但我无法滚动上下文菜单列表。每当我尝试滚动上下文菜单列表时，它就会消失。所以首先，我需要右键单击地图以查看上下文菜单列表。然后，我想使用滚动条来检查列表中的所有项目。第一部分工作正常，但第二部分没有按我的意愿工作。这是我的代码，

var map,
          cm,
          ll = new L.LatLng(-36.852668, 174.762675),
          ll2 = new L.LatLng(-36.86, 174.77);

      map = L.map('map', {
          center: ll,
          zoom: 15,
          contextmenu: true,
      contextmenuWidth: 140,
          contextmenuItems: [
        {
              text: 'Show coordinates'
          },
        {
              text: 'Center map here'
          },
        '-',
        {
              text: 'Zoom in'
          },
        {
              text: 'Zoom out'
          },
        {
              text: 'A'
          },
        {
              text: 'B'
          },
        {
              text: 'C'
          },
        {
              text: 'D'
          },
        {
              text: 'E'
          },
        {
              text: 'F'
          }
        ]
      });

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

      L.marker(ll, {
          contextmenu: true,
          contextmenuItems: [{
              text: 'Marker item',
              index: 0
          }, {
              separator: true,
              index: 1
          }]
      }).addTo(map);

      L.marker(ll2, {
          contextmenu: true,
          contextmenuInheritItems: false,
          contextmenuItems: [{
              text: 'Marker item'
          }]
      }).addTo(map);

/* To make contextmenu scrollable */
.leaflet-contextmenu {
  height: 80px;
  overflow: auto;         
}

<!doctype html>
<html>
  <head>
    <title>Leaflet Context Menu</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aratcliffe/Leaflet.contextmenu/dist/leaflet.contextmenu.min.css"/>
    
  </head>
  <body>
    <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/aratcliffe/Leaflet.contextmenu/dist/leaflet.contextmenu.min.js"></script>
  </body>
</html>

提前致谢！

Answer 1

最后，我找到了自己的解决方案。问题出在 MouseEvent 中。每当我想放大时，都会触发地图的鼠标事件！因此，我为上下文菜单容器添加了监听器以启用和禁用滚动。这是我的解决方案，

var map,
          cm,
          ll = new L.LatLng(-36.852668, 174.762675),
          ll2 = new L.LatLng(-36.86, 174.77);

      map = L.map('map', {
          center: ll,
          zoom: 15,
          contextmenu: true,
      contextmenuWidth: 140,
          contextmenuItems: [
        {
              text: 'Show coordinates'
          },
        {
              text: 'Center map here'
          },
        '-',
        {
              text: 'Zoom in'
          },
        {
              text: 'Zoom out'
          },
        {
              text: 'A'
          },
        {
              text: 'B'
          },
        {
              text: 'C'
          },
        {
              text: 'D'
          },
        {
              text: 'E'
          },
        {
              text: 'F'
          }
        ]
      });

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

      L.marker(ll, {
          contextmenu: true,
          contextmenuItems: [{
              text: 'Marker item',
              index: 0
          }, {
              separator: true,
              index: 1
          }]
      }).addTo(map);

      L.marker(ll2, {
          contextmenu: true,
          contextmenuInheritItems: false,
          contextmenuItems: [{
              text: 'Marker item'
          }]
      }).addTo(map);
      
      var isContextMenu = false;
      
      map.on('contextmenu.show', function (e) {
        isContextMenu = true;
        var map = document.getElementById('map');

        var container = e.contextmenu._container;

        // to scroll the context-menu div on the map
        container.addEventListener('mousedown', function () {
            mouseDown(container);
        }, false);

        container.addEventListener('mouseout', function () {
            mouseOut(container);
        }, false);
        
        // has a target
        if (e.relatedTarget) {

            // target has id
            if (e.relatedTarget.id) {
                window.relatedContextMenuTarget = e.relatedTarget;
            }
        }
    });
    
    function mouseDown(contextMenu) {
    if (isContextMenu === true) {
        contextMenu.style.display = "block";
        isContextMenu = false;
    }
}

function mouseOut(contextMenu) {
    if (isContextMenu === false) {
        contextMenu.style.display = "none";
    }
}

/* To make contextmenu scrollable */
.leaflet-contextmenu {
  height: 80px;
  overflow: auto;         
}

<!doctype html>
<html>
  <head>
    <title>Leaflet Context Menu</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aratcliffe/Leaflet.contextmenu/dist/leaflet.contextmenu.min.css"/>
    
  </head>
  <body>
    <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/aratcliffe/Leaflet.contextmenu/dist/leaflet.contextmenu.min.js"></script>
  </body>
</html>

带滚动条的传单上下文菜单

Leaflet contextmenu with scrollbar

javascript

css

contextmenu

leaflet