React-map-gl: How to enable wheel scroll in Popup?

[mkral]

I've set the popup to captureScroll, and I'm able to scroll my popup with the scrollbar but mouse-wheel events don't seem to scroll the content.

[jamalx31]

+1

[mkral]

@jamalx31 What I ended up doing was adding this:

  componentDidMount() {
    this._handleScroll = this._handleScroll.bind(this);
    document.addEventListener("wheel", this._handleScroll);
  }
  componentWillUnmount() {
    document.removeEventListener("wheel", this._handleScroll);
  }

  _handleScroll = function(e) {
    if (this.scrollableDiv.contains(e.target) && this.props.isPopupExpanded) {
      e.preventDefault();
      const dY = e.deltaY;
      this.scrollableDiv.scrollTop += dY;
    }
  };

and in the continer div: <div ref={e => (this.scrollableDiv = e)} >

[fabioespinosa]

+1

[fabioespinosa]

God, thank you @mkral, was loosing my mind!

[Pessimistress]

@fabioespinosa @mkral @jamalx31 Give v3.2.7 a try.

[fabioespinosa]

Thanks @Pessimistress worked great 💯

[fabioespinosa]

@Pessimistress sorry to bother, in desktop works well, but on phone it does not respond to touch scrolling

[Pessimistress]

@fabioespinosa Try set the CSS of your scrollable component touch-action: pan-y? Related issue https://github.com/uber/react-map-gl/issues/506

[Pessimistress]

Closed for inactivity.

[dannykennedy]

Not sure if this is the same issue, but I landed here and my problem was that my (handmade) popup was inside my HTMLOverlay. Taking it out meant that scroll events were registered on the popup rather than the map.