CODEWITHSUNDEEP
htmlcssmicrosoft-edge
Someone Special
Someone Special

Reputation: 13588

css overflow 'auto' on edge

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?

enter image description here

Upvotes: 2

Views: 1422

Answers (2)

Someone Special
Someone Special

Reputation: 13588

Answer:

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

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

Upvotes: 2

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

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

Upvotes: 1

Related Questions