search

Home  >  Article  >  Web Front-end  >  Make a Div vertically scrollable using CSS

Make a Div vertically scrollable using CSS

PHPz
PHPzforward
2023-09-06 17:29:021314browse

使用 CSS 使 Div 可垂直滚动

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>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>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!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to vertically align an image in a section that extends across the entire web page?Next article：How to vertically align an image in a section that extends across the entire web page?

Related articles

See more