css overflow 'auto' on edge

Question

I need to hide the overflow scroll bar on Edge.

I have the current properties on the required scroll area and it's working in macos chrome/safari.

height: "240px", maxHeight: "240px", overflowY: "auto"

I also added the following

  html {
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }

Desire Behavior The scroll bar should hide, unless user is scrolling.

How can I auto hide the bars?

user_11171286 · Answer

Add these attributes to the container:

onmouseover="this.style.overflowY='scroll'" onmouseout="this.style.overflow='hidden'"

And set set overflow: hidden;.

Codepen: https://codepen.io/manaskhandelwal1/pen/GRjXmQW

user_2822041 · Answer

Answer:

From the accepted answer, I modified and use :hover to get the desire behavior.

    .mydiv {
        overflow-y: 'hidden'
     }
     .mydiv:hover {
         overflow-y: 'auto'
     }