How to make a div vertically scrollable without content using CSS ?
In this article, we will see how we can create a vertical scrollable section using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style,
- Create an HTML div element with the class container.
- Created three more nested div with class box
- Write some content inside each div with the class box.
- The “scroll” option is added in this case to always show the scrollbar for the overflow-y property.
- The height is set to 100vh for 100% height of the viewport, which is set for the reason that if the contents exceed, it adds a scrollbar.
- The scroll-snap-type is set to y, so that the direction of scroll snapping is in the y-axis for the container div. This property is added if the browser is needed to be stopped at a particular time. This forces scrolling to a snap point on the y-axis.
- The scroll-snap-align property is used on elements with class “box” to set the position that scrolling will snap to. The scroll-snap-align is used to tell the point where the scrolling should stop.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.