Sign in


Sign up


Angular Bootstrap scrollbar and SmoothScroll MDB Pro component

Click on the links below to see the live example

To achieve Smooth Scroll effect add a directive mdbPageScroll to the links.


<!--Navigation links with a Smooth SCroll effect-->
<ul>
    <li>
        <h5><a mdbPageScroll href="#test1">Click to scroll to section 1</a></h5>
    </li>
    <br>
    <li>
        <h5><a mdbPageScroll 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

Smoothscroll options

PageScroll properties


Name Type Default Description
[pageScrollHorizontal] boolean false Whether the scroll should happen in vertical direction (false, default) or horizontal (true).
[pageScrollOffset] number 0 Pixels to offset from the top of the element when scrolling to (positive value = scrolling will stop given pixels atop the target element).
[pageScrollDuration] number 2000 Duration in milliseconds the whole scroll-animation should last.
[pageScrollSpeed] number 3000 Speed in Pixel/Second the animation should take. Only applied if no duration is set.
[pageScrollInterruptible] boolean true Whether the scroll animation should stop if the user interferes with it (true) or not (false).
[pageScrollEasing] string Easing method to be used while calculating the scroll position over time (default is linear easing).
[pageScrollSpeed] number 3000 Speed in Pixel/Second the animation should take. Only applied if no duration is set.

PageScroll events


Name Type Default Description
[pageScrollFinish] string Fired when the scroll-animation stops. Emits a boolean value which indicates whether the scroll animation finished successfully and reached its target (true) or not (false). Possible reasons for false: target not found or interrupted due to another scroll animation starting or user interaction.

<a mdbPageScroll [pageScrollOffset]="0" [pageScrollDuration]="2000" [pageScrollEasing]="functionName" [pageScrollInterruptible]="false" (pageScrollFinish)="doSmth($event)" href="#theanchor">Visit</a>
    

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;
}