Can I disable pointer events on a container but still allow it to be scrolled with the mouse?

Issue

I think the answer is no and thus I'm going to need a new approach.

Essentially what I'm trying to do is put a group of floating action buttons on top of a leaflet map. There may be a lot of buttons and thus I want to allow the user to scroll through them. So I put the fabs into a container to allow them to be scrollable but this then prevents mouse events from reaching the underlining map.

Does anyone know a way I can allow the containers to be scrollable but not prevent mouse events from reaching the background?

Here's the basic set up I've got:

<div class="container">
  <div id="map"></div>

  <div class="controls">
    <button class="fab">Button</button>
    ...
  </div>
</div>

.container {
  position: relative;
}

#map {
  position: absolute;
  inset: 0;
}

.controls {
  overflow: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

and here's a codepen that shows the problem I've got.

Solution

It can be done with the :has pseudo selector.

.scroll-area:not(:has(:hover)) {
  pointer-events: none;
}

This selector hasn't been rolled out to all browsers yet though (caniuse.com/css-has) but there is a postcss plugin.

Answered By - Rebecca Stevens