bootstrap 4 – Bootstrap4 adding scrollbar to div

ByMartin January 27, 2022

bootstrap 4 – Bootstrap4 adding scrollbar to div

Yes, It is possible,
Just add a class like anyclass
and give some CSS style. Live

.anyClass {
  height:150px;
  overflow-y: scroll;
}

.anyClass {
  height:150px;
  overflow-y: scroll;
}

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css rel=stylesheet/>

<div class= col-md-2>
  <ul class=nav nav-pills nav-stacked anyClass>
    <li class=nav-item>
      <a class=nav-link active href=#>Active</a>
    </li>
    <li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li>
    <li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li><li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li>
    <li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li><li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li>
    <li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li><li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li>
    <li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li><li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li>
    <li class=nav-item>
      <a class=nav-link href=#>Link</a>
    </li>
    <li class=nav-item>
      <a class=nav-link disabled href=#>Disabled</a>
    </li>
  </ul>
</div>

Use the overflow-y: scroll property on the element that contains the elements.

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

Sometimes it is interesting to place a height for the element next to the overflow-y property, as in the example below:

<ul class=nav nav-pills nav-stacked style=height: 250px; overflow-y: scroll;>
  <li class=nav-item>
    <a class=nav-link active href=#>Active</a>
  </li>
  <li class=nav-item>
    <a class=nav-link href=#>Link</a>
  </li>
  <li class=nav-item>
    <a class=nav-link href=#>Link</a>
  </li>
  <li class=nav-item>
    <a class=nav-link disabled href=#>Disabled</a>
  </li>
</ul>

bootstrap 4 – Bootstrap4 adding scrollbar to div

.Scroll {
  height:600px;
  overflow-y: scroll;
}

<!DOCTYPE html>
<html>
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<script>
</script>
</head>
<body>

<h1>Smooth Scroll</h1>

<div class=Scroll>
  <div class=main id=section1>
    <h2>Section 1</h2>
    <p>Click on the link to see the smooth scrolling effect.</p>
    <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
  </div>
  <div class=main id=section2>
    <h2>Section 2</h2>
    <p>Knowing how to write a paragraph is incredibly important. It’s a basic aspect of writing, and it is something that everyone should know how to do. There is a specific structure that you have to follow when you’re writing a paragraph. This structure helps make it easier for the reader to understand what is going on. Through writing good paragraphs, a person can communicate a lot better through their writing.</p>
  </div>
  <div class=main id=section3>
    <h2>Section 3</h2>
    <p>Knowing how to write a paragraph is incredibly important. It’s a basic aspect of writing, and it is something that everyone should know how to do. There is a specific structure that you have to follow when you’re writing a paragraph. This structure helps make it easier for the reader to understand what is going on. Through writing good paragraphs, a person can communicate a lot better through their writing.</p>
  </div>
  <div class=main id=section4>
    <h2>Section 4</h2>
    <p>Knowing how to write a paragraph is incredibly important. It’s a basic aspect of writing, and it is something that everyone should know how to do. There is a specific structure that you have to follow when you’re writing a paragraph. This structure helps make it easier for the reader to understand what is going on. Through writing good paragraphs, a person can communicate a lot better through their writing.</p>
  </div>

  <div class=main id=section5>
    <h2>Section 5</h2>
    <a href=#section1>Click Me to Smooth Scroll to Section 1 Above</a>
  </div>
  <div class=main id=section6>
    <h2>Section 6</h2>
    <p>Knowing how to write a paragraph is incredibly important. It’s a basic aspect of writing, and it is something that everyone should know how to do. There is a specific structure that you have to follow when you’re writing a paragraph. This structure helps make it easier for the reader to understand what is going on. Through writing good paragraphs, a person can communicate a lot better through their writing.</p>
  </div>
  <div class=main id=section7>
    <h2>Section 7</h2>
    <a href=#section1>Click Me to Smooth Scroll to Section 1 Above</a>
  </div>
</div>
</body>
</html>

Leave a Reply Cancel reply