Add auto scroll to any element
Explore our HTML category, where you’ll discover a plethora of helpful articles and tutorials suitable for beginners and experienced developers alike. Dive into various HTML elements and structures that can be employed in diverse projects, catering to their unique needs and specifications.
max-width This property sets the maximum width of the .scroll-box element to 400 pixels. The content inside the box won’t exceed this width.
max-height This property sets the maximum height of the .scroll-box element to 200 pixels. If the content is taller than this, a vertical scrollbar will appear, allowing the user to scroll to see the hidden content.
overflow-y This property specifies how the browser should handle content that overflows the vertical axis. In this case, it is set to “auto,” which means a scrollbar will be displayed if the content exceeds the specified maximum height.
padding This property adds 20 pixels of padding to all sides of the .scroll-box element. Padding is the space between the content and the border of the element.
.scroll-box
{
max-width: 400px;
max-height: 200px;
overflow-y: auto;
padding: 20px;
}
The content inside the .scroll-box will be displayed within a box that has a maximum width of 400 pixels, a maximum height of 200 pixels, and a vertical scrollbar if the content overflows the specified height.
<div class=”scroll-box”>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>