Css how to make a div scrollable

Asked
Active3 hr before
Viewed126 times

7 Answers

scrollable
90%

Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height,,scroll = The overflowing content is clipped, but a scroll-bar is added to see the rest of the content within the set height of the div,auto = If there is overflowing content, it is clipped and a scroll-bar should be added to see the rest of the content within the set height of the div,use overflow:auto property, If overflow is clipped, a scroll-bar should be added to see the rest of the content,and mention the height

Example_snippet/controller/utility/_scrollable.js/ .itemconfiguration { . . .
 .itemconfiguration {
    height: 440 px;
    width: 215 px;
    overflow: auto;
    float: left;
    position: relative;
    margin - left: -5 px;
 }
load more v
88%

Example_snippet/controller/utility/_scrollable.js/ <div id="" style="overflow:scr. . .
<div id="" style="overflow:scroll; height:400px;">
load more v
72%

Set the background-color, width, and height properties for the <div> element,,Use the overflow-x property to specify whether the content must be hidden, visible or scrolling horizontally when the content overflows the element’s left and right edges

Example_snippet/controller/utility/_scrollable.js/ <body> <h2>W3docs</h2> <di. . .
<body>
   <h2>W3docs</h2>
   <div class="scroll">
      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 a
      n 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. It is a long
      established fact that a reader will be distracted by the readable content of a page
      when looking at its layout. The point of using Lorem Ipsum is that it has a
      more-or-less normal distribution of letters, as opposed to using 'Content here,
      content here', making it look like readable English. Many desktop publishing packages
      and web page editors now use Lorem Ipsum as their default model text, and a search
      for 'lorem ipsum' will uncover many web sites still in their infancy.
   </div>
</body>
load more v
65%

CSS tutorial: CSS Overflow,CSS tutorial: CSS Positioning,If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:,Show different overflow property values:

Example_snippet/controller/utility/_scrollable.js/ overflow. . .
overflow
load more v
75%

Use these shorthand utilities for quickly configuring how content overflows an element,, Examples ,Barebones overflow functionality is provided for two values by default, and they are not responsive

Example_snippet/controller/utility/_model.js/ <div class="overflow-auto">.... . .
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
40%

To create a vertical scroll bar use x and y-axis and you should set the overflow-x property as hidden and overflow-y property as auto, By doing so the horizontal scroll bar property would hide automatically and only vertical scroll bar would be displayed

Example_snippet/controller/utility/_model.js/ Element{ overflow-. . .
    Element {
       overflow - x: hidden;
       overflow - y: auto;
    }
load more v
22%

How to make a div scrollable using CSS,But since the content only over flow outside the div vertically, it will create only a vertical scrollbar like this:,If you want to make a div scrollable, use the overflow property,If you want only a vertical scrollbar, use overflow-y : scroll

Example_snippet/controller/utility/_model.js/ <!DOCTYPE html> <html lang="en. . .
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>


   <div class="content">

      <p>
         When content in a div exceeds the div size, we make the div scrollable. This is to help use see all the content in the div. And also to prevent the div from increasing in size because its content.
      </p>

      <p>
         The Auto value will look at the width and height of a div. If they are defined, it won't let the div expand past those boundaries. Instead if the content exceeds those boundaries, it will create a scrollbar for both. That is, it's used to create both horizontal and vertical scrollbar for a div.
      </p>

      <p>
         The Auto value will look at the width and height of a div. If they are defined, it won't let the div expand past those boundaries. Instead if the content exceeds those boundaries, it will create a scrollbar for both. That is, it's used to create both horizontal and vertical scrollbar for a div.
      </p>

      <p>
         The Auto value will look at the width and height of a div. If they are defined, it won't let the div expand past those boundaries. Instead if the content exceeds those boundaries, it will create a scrollbar for both. That is, it's used to create both horizontal and vertical scrollbar for a div.
      </p>


   </div>


   <script src="script.js"></script>
</body>

</html>
load more v