How to create content area scrollable instead of the page using CSS ?
Making a particular content area scrollable is done by using CSS overflow property. There are different values in overflow property that are listed below.
- visible: The property indicates that it can be rendered outside the block box and it is not clipped.
- hidden: This property indicates that the overflow is clipped. The rest of the content will be invisible.
- auto: If overflow is clipped, then automatically a scroll-bar is added for the rest of the content.
- scroll: This property indicates that the scroll-bar is added to see the rest of the content if it is clipped.
- initial: This property sets to its default value.
- inherit: This property inherits the property from its parent element.
We can disable page scrolling by setting body overflow property to hidden.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
In both the examples, we will be using this property to disable the page scrolling.
Example 1: In this example, we use overflow: scroll property to make “div” vertically and horizontally scrollable.
Example 2: In this example, use overflow:auto; to make “div” vertically and horizontally scrollable.
Note: You can enable only vertical scrolling by setting overflow-y to scroll and auto and overflow-x to hidden.
Similarly for horizontal scrolling, set overflow-x to scroll or auto and overflow-y to hidden.
Example 3: This example is used only for vertical scrolling of content area.