当鼠标在信息框内时禁用leafletjs map上的滚动

Question

I have Leaflet presenting a background WMS map with features on it. When I click a cluster of features I have implemented a, moveable, feature-info box that will come into view and the dom based on the data stored within the features. See screenshot.

As it stands I cannot scroll in this list, but the map behind it still zooms in and out when the scrollwheel is used. My initial thought was that a simple Javascript eventlistener, utilizing js event bubbling, would fix this. Below I show the DOM structure:

    <div id="FeatureInfoMaster" data-tap-disabled="true" style="left: 136px; top: 648px;">
       <span class="map-featureinfo-featureInfoClose" onclick="$map.featureinfo.ToggleFeatureInfoDiv();">X</span>
       <div id="divFeatureContainer" class="map-featureinfo-container">
          <div id="divFeatureMasterDetail" class="map-featureinfo-masterdetail">
             <div id="divMasterView" class="map-featureinfo-master not-this">
                <div class="map-featureinfo-multiple-detail-wrapper">
                   <div id="divFeatureInfoDetailHeader" class="map-featureinfo-detail-header"> Der blev fundet 790 features </div>
                </div>
                <div class="map-featureinfo-multiple-features-detail-wrapper">
                   <!-- ngRepeat: feature in nfc.Features -->
                   <div ng-repeat="feature in nfc.Features" ng-click="nfc.selectFeature(feature);" class="ng-scope">
                      <div class="map-featureinfo-master-title ng-binding">F</div>
                   </div>
                   <!-- end ngRepeat: feature in nfc.Features -->
                   <div ng-repeat="feature in nfc.Features" ng-click="nfc.selectFeature(feature);" class="ng-scope">
                      <div class="map-featureinfo-master-title ng-binding">F</div>
                   </div>
                   <!-- end ngRepeat: feature in nfc.Features -->
                   <div ng-repeat="feature in nfc.Features" ng-click="nfc.selectFeature(feature);" class="ng-scope">
                      <div class="map-featureinfo-master-title ng-binding">S</div>
                   </div>
                   <!-- end ngRepeat: feature in nfc.Features -->
                   <!-- Loads and loads more lines like the ones above -->
                </div>
             </div>
             <div id="divDetailView" class="map-featureinfo-detail not-this">
                <div class="map-featureinfo-detail-wrapper">
                   <div class="map-featureinfo-detail-backbutton" onclick="$map.featureinfo.ToggleMasterDetailFeature(false);"> X  </div>
                   <div class="map-featureinfo-detail-prevbutton" ng-click="nfc.step(false);"> &lt;&lt;&lt;  </div>
                   <div class="map-featureinfo-detail-nextbutton" ng-click="nfc.step(true);"> &gt;&gt;&gt;  </div>
                   <div id="divFeatureInfoDetailHeader" class="map-featureinfo-detail-header ng-binding" ng-bind-html="nfc.UseHeader"></div>
                </div>
                <div class="map-featureinfo-detail-tekst">
                   <div ng-bind-html="nfc.UseHtml" class="ng-binding">
                      <div class="leaflet-popup-attributelist">
                         <table>
                            <tbody>
                               <!-- Some table containing the data -->
                            </tbody>
                         </table>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <script type="text/javascript">var mapapp = angular.module("featureInfoApp", []); mapapp.controller("featureInfoCtrl", function ($sce) { this.UseHtml = null;this.SelectedIndeks = 0;this.UseHeader = null;this.Features = null;this.SelectedFeature = null;this.step = function (forward) { var indeks = this.SelectedIndeks;if (forward) {   indeks = indeks +1;} else {   indeks = indeks -1;};if (indeks < 0)   indeks = this.Features.length-1;else if (indeks > (this.Features.length-1))    indeks = 0;this.selectFeature(this.Features[indeks]);};this.loaddata = function (data) { this.Features = data;this.SelectedIndeks = 0;if (data.length == 1) {   this.selectFeature(data[0]);} else {    this.SelectedFeature = data[0];   this.UseHtml = $sce.trustAsHtml(data[0].Html);   $map.featureinfo.MarkSelectedFeatureInMap(this.SelectedFeature);};};this.selectFeature = function (feature) { this.SelectedFeature = feature;this.UseHtml = $sce.trustAsHtml(feature.Html);this.UseHeader = $sce.trustAsHtml(feature.Title);this.SelectedIndeks = feature.Indeks;$map.featureinfo.MarkSelectedFeatureInMap(feature);$map.featureinfo.ToggleMasterDetailFeature(true);};});</script>
    </div>

I tried something along these lines (which partially works):

$(document).ready(function () {
    const mapDiv = document.querySelector('#mapdiv');

    mapDiv.addEventListener('mouseover', function (e) {
        if (e.target.id == 'divMasterView') {
            console.log("enter")
            map.scrollWheelZoom.disable();
        }
    })

    mapDiv.addEventListener('mouseout', function (e) {
        if (e.target.id == 'divMasterView') {
            console.log("leave")
            map.scrollWheelZoom.enable();
        }
    })
})

This does so that when my mouse is hovering ontop of the scrollbar, the map scrolls is disabled, and my mousewheel now activates the scroll functionality of the featureinfo box. On mobile devices the drag functionality works out of the box with no changes needed. Does anyone know which angle to attack this problem from? I can't seem to get any more done on this and I have no clue what-so-ever

Answer 1

You can add L.DomEvent.disableClickPropagation(mapDiv); to disable the map events below this DOM Element

Update

When you open your dialog call: L.DomEvent.disableScrollPropagation(document.getElementById('divFeatureMasterDetail'))