I have an element dropdown with a vertical or horizontal overflow and when it reach the end of the scroll, the browser will start scrolling the parent element(scroll chaining).I want to prevent this default behaviour. I have tried following ways

overscroll-behavior: contain;

It has no browser support for safari.

Also use event.preventDefault() to prevent the default behavior so it blocks scrolling the page. We can’t prevent scrolling by using event.preventDefault() in onscroll listener, because it triggers after the scroll has already happened.

document.body.addEventListener('onscroll',function(e){
  e.preventDefault();});

I need a solution which also supports safari browser.