Bootstrap scrollbar and SmoothScroll MDB Pro component
Bootstrap smooth scroll is an animated movement from a trigger - button, link or any other clickable element. - to another place of the same page.
To achieve Smooth Scroll effect add a class .smooth-scroll
to the parent element of your links
<!--Navigation links with a Smooth SCroll effect-->
<ul class="smooth-scroll list-unstyled">
<li>
<h5><a href="#test1">Click to scroll to section 1</a></h5></li>
<br>
<li>
<h5><a href="#test2">Click to scroll to section 2</a></h5></li>
<br>
</ul>
<!--Dummy sections with IDs coressponding with the links above-->
<div id="test1">
<h3>Section 1</h3>
<hr>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
</div>
<div id="test2">
<h3>Section 2</h3>
<hr>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
</div>
Section 1
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Section 2
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Scroll Bar customization
Add the following CSS code to your project:
Note 1: To change the color of the Scroll Bar, you have to edit a value of the "background" property
Note 2: It works fine with Chrome and Opera, but Firefox doesn't support yet a ScrollBar customization.
/* Scrollbar */
::-webkit-scrollbar {
width: 11px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #your-color;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #your-color;
}