The content we want to use in the website can be large and may take up a lot of space, which means that other elements of the website may be displaced, affecting the responsiveness of the website. To avoid this from happening, you need to provide the user with scrollable content so that if the user is interested, he or she can scroll down to read the entire content.
In this article we will see how to make a div scroll vertically and what properties we will use to achieve this.
How to make a div scroll vertically?
The overflow attribute can be used to make a DIV scroll vertically because multiple values can be entered in the overflow attribute. There are some values such as hidden and auto. We can create horizontal and vertical scrollbars based on the values used. If we use auto value we can get vertical scrollbar. Let’s take a look at the syntax of the overflow attribute:
grammar
overflow:hidden/visible/clip/scroll/auto/inherit;
We will use x-axis and y-axis and set the properties of x-axis to hidden and the properties of y-axis to automatic, this will hide the horizontal scroll bar and only show the vertical scroll bar, we will automatically get what we need div.
Example
In this example, we will declare a div and then write a paragraph where we will add the overflow attribute to make the div scroll vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of vertically scrollable div</title>
<style>
h2 {
color: Green;
}
.scrl {
padding: 3px;
color: white;
margin: 2px, 2px;
background-color: black;
height: 118px;
overflow-x: hidden;
color: white;
overflow-y: auto;
text-align: justify;
width: 489px;
}
</style>
</head>
<body>
<center>
<h2 id="Hi-This-an-example-of-the-vertically-scrollable-div">Hi! This an example of the vertically scrollable div</h2>
<div class="scrl">This is an example of the vertically scrollable
div many beginner coders need the help of some articles or some sort of tutorials
to write there code. There are many instances in which the coder might need help
or can be stuck on a particular question. The community of coders is very huge
and is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
In the above code, we have used the overflow property and changed its x-axis to hidden and y-axis to visible, which gives us a vertical scrollable bar in the paragraph we are writing here. Let's look at the output we get from executing the code.
You can look at the output above and you can see that we have a vertically scrollable bar that can be used to scroll down.
Note - When we use the overflow attribute, we need to specify the element of "block element", otherwise it may not work. Since this property is mainly used for clipping content or adding scrollable bars (either vertically or horizontally) because the content being used is too large to fit in the specified area.
Let's look at another example to understand this property better.
Example
In this example, instead of changing the x-axis and y-axis of the property, we will set the value of the property to auto to make the div scroll vertically. The following is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Another Example of vertically scrollable div</title>
<style>
.scrlr {
margin: 4px;
padding: 4px;
color: white;
background-color: black;
width: 488px;
height: 118px;
margin: 4px;
text-align: justify;
overflow: auto;
width: 488px;
text-align: justify;
}
h2 {
color: Red;
}
</style>
</head>
<body>
<center>
<h2 id="Hi-This-another-example-of-the-verticallly-scrollable-div">Hi! This another example of the verticallly scrollable div</h2>
<div class="scrlr">This is an example of the vertically scrollable div
many beginner coders need the help of some articles or some sort of tutorials to
write there code. There are many instances in which the coder might need help or
can be stuck on a particular question. The community of coders is very huge and
is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
In the above code, we changed the value of the overflow attribute from hidden x-axis and automatic y-axis to auto, and used the same example to see our output results. Let's take a look at the output this code will generate.
You can look at the above output and you can see that even with the auto value on the overflow property, we still have scrollbars.
in conclusion
The overflow property is widely used to clip content when it takes up a lot of space. Or if we want to add a scroll bar for the user to scroll down, thus reducing the overall space it takes up on the web page.
In this article, we learned how to use the overflow attribute and how to add a vertical scrollbar on a div and more about the values used in the overflow attribute.
The above is the detailed content of Make a Div vertically scrollable using CSS. For more information, please follow other related articles on the PHP Chinese website!
Anchor Positioning Just Don't Care About Source OrderApr 29, 2025 am 09:37 AMThe fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.
What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PMArticle discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.
What are the different CSS border properties?Apr 28, 2025 pm 05:30 PMThe article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.
What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PMThe article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.
What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PMArticle discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.
How can we add comments in CSS?Apr 28, 2025 pm 05:27 PMThe article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.
What are CSS Selectors?Apr 28, 2025 pm 05:26 PMThe article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.
Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PMThe article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Dreamweaver Mac version
Visual web development tools
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
