I am unable to understand the difference between "overlay" & "auto". Does "overlay" does the same work as "auto"?
overflow:overlay stops the scroll bar having that effect, in Chrome-based browsers.
The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. Note: The overflow property only works for block elements with a specified height.
It can take four different values: Visible: Displays the overflowing content without any modifications – this is the default value of the overflow property. Hidden: Hides the overflowing content. Scroll: Adds vertical and horizontal scroll bars to see the overflowing (hidden) content.
The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
The only difference is that overflow: overlay
is only supported by -Webkit browsers, is non-standardized, and allows the content to extend beneath the scrollbar - whereas overflow: auto
will not allow the content to extend beneath the scrollbar, if it appears it'll occupy the space required and shift the content accordingly (either vertically or horizontally).
p { display: inline-block; width: 12em; height: 5em; border: dotted; } p.overflow-auto { overflow: auto; /* append scrollbars if necessary and shift content accordingly to accommodate */ } p.overflow-overlay { overflow: overlay; /* append scrollbars if necessary and overlay over/above content */ }
<p class="overflow-auto">overflow: auto Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> <p class="overflow-overlay">overflow: overlay Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
The above snippet demonstrates the difference as follows:
p.overflow-auto { overflow: auto; /* append scrollbars if necessary and shift content accordingly to accommodate */ } p.overflow-overlay { overflow: overlay; /* append scrollbars if necessary and overlay over/above content */ }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With