overflow:overlay is working fine in chrome and safari. This property isn't available in IE and Mozilla browsers. I need the scroll bar pane to be visible always.

overflow:overlay is working fine in chrome and safari. This property isn't available in IE and Mozilla browsers. I need the scroll bar pane to be visible always.

• javascript
• html
• css

Share Improve this question Follow edited Apr 24, 2019 at 6:39 codejockie 10.9k44 gold badges4848 silver badges5757 bronze badges asked Feb 27, 2018 at 23:14 koushik uikoushik ui 9111 gold badge11 silver badge33 bronze badges 3

• 2 my advice: don't use deprecated functionality ... according to MDN This deprecated API should no longer be used, but will probably still work - though, it only ever "worked" in webkit – Jaromanda X Commented Feb 27, 2018 at 23:26
• Check out stackoverflow./questions/43050434/… – omukiguy Commented Feb 28, 2018 at 3:49
• Official Mozilla Doc – law_81 Commented Feb 28, 2018 at 12:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

As mentioned by in the ments above and in the doc: https://developer.mozilla/en-US/docs/Web/CSS/overflow

This deprecated API should no longer be used, but will probably still work.

However, since you mentioned:

I need the scroll bar pane to be visible always.

You can use the value overflow: scroll, and you will always have the scrollbar whether or not any content is actually clipped, and this will prevent the content from moving and changing your layout, for example:

div {
  border: 1px solid black;
  float: left;
  height: 100px;
  margin: 10px;
  overflow: scroll;
  width: 200px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum ligula vel dolor eleifend, vel interdum risus tristique. Nullam laoreet sed metus at aliquam. Aliquam ornare sagittis nibh in volutpat. Sed dolor orci, viverra ut lectus ac, modo faucibus nisl. Proin molestie felis ligula, ullamcorper sollicitudin lacus modo eu. Curabitur sit amet cursus ante. Aliquam vel leo et justo luctus semper eget sit amet turpis. Aenean ac rhoncus dolor. Etiam ut euismod arcu, vehicula suscipit ex.   Donec nec posuere sapien. Phasellus accumsan sem nec nibh congue, ut porttitor diam convallis. Nulla ac tempus arcu. Suspendisse at lorem est. Nullam sit amet modo felis. Quisque ac mollis metus. Duis varius eleifend sem, eget venenatis ante mattis
  at.
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum ligula vel dolor eleifend, vel interdum risus tristique. 
</div>