Scroll through Layer List on mobile touch devices as layer list has 20+ layers

[Mitchel Blais]

I have been trying to enable mobile touch scrolling to the layer control. I have added 

.leaflet-control-layers-expanded { max-height: 300px; overflow-y: scroll; }

it works great for desktop version. However when I look at the site on a mobile touch device and try to scroll using my finger it pan's the map and does not scroll the layer control.

I have also tried adding

 

-webkit-overflow-scrolling: touch;

But no luck,

Any suggestions?

[Mitchel Blais]

I managed to figure it out.... I added 

.leaflet-control-layers-expanded { max-height: 300px; overflow-y: scroll; }

and the added to my js file when the map is done loading 

var container = document.getElementsByClassName("leaflet-control-layers")[0];
if (!L.Browser.touch) {
  L.DomEvent
    .disableClickPropagation(container)
    .disableScrollPropagation(container);
} else {
  L.DomEvent.disableClickPropagation(container);
}

Hope this will be helpful for other people..