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.
In order to activate Smooth Scroll from one route page to another route page, you need to add a directive mdbPageScroll
and [routerLink]="['/your-link-direction']"
to the <a>
element in order to activate smoothScroll after clicking on this item.
In example your's navigation should looks like this below.
<nav>
<ul>
<a [routerLink]="['/primary']" mdbPageScroll href="#scroll"><li>PrimaryComponent</li></a>
<a [routerLink]="['/secondary']" mdbPageScroll href="#scroll2"><li>SecondaryComponent</li></a>
<a [routerLink]="['/home']" mdbPageScroll href="#scroll3"><li>HomeComponent</li></a>
<a [routerLink]="['/']"><li>Default page</li></a>
</ul>
</nav>
<router-outlet></router-outlet>
And your's router configuration for this example should like this below:
const appRoutes: Routes = [
{path: 'primary', component: PrimaryComponent},
{path: 'secondary', component: SecondaryComponent},
{path: 'home', component: HomeComponent},
]
Basic example
<!--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;
}