Scrolling in css
In this article we are going to learn about scroll property in css to add the scrollbar to the element box that have overflowing content.
We learnt about css in general, fonts, colors, background colors, borders, margin, padding, float, width, minimum width, maximum width, height, minimum height and maximum height in css so, we will be focusing on scroll property.
Scroll
Scroll property is used in css when the content overflows, if the content is more than the screen of the device browser the scroll is helpful for users to be able to view all the overflowing content by using scrollbar added by scroll property.
We are going to create a div element with content without scroll-behavior, copy and paste below.
<div style="background: yellow; height: 100px; overflow-y: auto;">If the conent overflows element box width or height, if the element width or height is too small to cantain its content the content might overlap or the user cannot see all the content on the web page.</div>
So, we should have the following results.
So, the div element without scroll property cannot have any scroll bar to allow users to see all the overflowing content therefore, we need to add the scroll-behavior on our div element with overflowing content.
Let us create html element now with scroll property added, copy and paste below code.
<div style="background: yellow; height: 100px; overflow-y: auto;">If the conent overflows element box width or height, if the element width or height is too small to cantain its content the content might overlap or the user cannot see all the content on the web page.</div>
So, we should have the following results.
So, as we can see the div element have scrollbar that allows us to scroll the overflowing content. This is because of overflow property which adds a vertical scrollbar because the height is too small to contain our content.
Overflow-y
Overflow-y property is a scroll property used to add a vertical scrollbar on the webpage if the content overflows vertically due to limited height size. So, we add overflow-y property with the value of auto to add scrollbar if content is overlaping and to remove scrollbar if content is not overlaping. It is auto detecting, whether content is overlaping or not. We ca also set the value to hidden if we remove vertical scrollbar permanetly.
Let us use overflow-y property with overflow-x hidden, copy and paste below code.
<div style="background: yellow; height: 100px; overflow-y: auto; overflow-x: hidden;">If the conent overflows element box width or height, if the element width or height is too small to cantain its content the content might overlap or the user cannot see all the content on the web page.</div>
So, we should have the following results.
Overflow-x
Overflow-x property is a scroll property used to add horizontal scrollbar on the webpage if the content overflows horizontally due to limited width size. So, we add overflow-x property with the value of auto to add scrollbar if content is overlaping and to remove scrollbar if content is not overlaping. It is auto detecting, whether content is overlaping or not. We ca also set the value to hidden if we remove horizontal scrollbar permanetly.
Let us use overflow-x property with overflow-y hidden, copy and paste below code.
<div style="background: yellow; max-width: 100px; overflow-x: auto; overflow-y: hidden;">If the conent overflows element box width or height, if the element width or height is too small to cantain its content the content might overlap or the user cannot see all the content on the web page.</div>
So, we should have the following results.