Prevent "back" behavior on mac trackpad on an element with horizontal scroll

Question

If you scroll in one direction very hard in mac, it will trigger back/forward navigation behavior..

I have a component which is largely dependent on horizontal scrolling behavior. However, if you scroll too hard and hit the edge, it will trigger a back or forward behavior. For a good user experience, I am trying to disable this while scrolling. This is how I started:

export default class FilmRoll extends Component {
  onScroll = ({ scrollLeft, scrollRight, target }) => {
    // not sure what to do next
  };

  render() {
    return (
      <div onScroll={this.onScroll}>
        {this.props.children}
      </div>
    );
  }
}

How do you prevent this default behavior in Mac OS X?

Answer 1

you can add overflow-x: scroll; (or auto) and overscroll-behavior-x: contain; to prevent the navigation when scrolling with the trackpad