Angular Bootstrap Scrollbar and SmoothScroll

Angular Scrollbar and SmoothScroll - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap smooth scroll is an animated movement from a trigger - button, link or any other clickable element - to another place on the same page.

Angular Bootstrap SmoothScroll MDB Pro component

Click on the links below to see a live example

To achieve a Smooth Scroll effect add the class mdbPageScroll to the link which should now have a Smooth Scroll. 

        
            
          <!--Navigation links with a Smooth SCroll effect-->
          <ul class="list-unstyled">
            <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" style="height: 1000px;">
            <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" style="height: 1000px;">
            <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

Material colors scrollbar 

        
            
          <div class="scrollbar scrollbar-primary">
            <div class="force-overflow"></div>
          </div>
        
        
    
        
            
          .scrollbar {
            margin-left: 30px;
            float: left;
            height: 300px;
            width: 65px;
            background: #fff;
            overflow-y: scroll;
            margin-bottom: 25px;
          }
          .force-overflow {
            min-height: 450px;
          }
          .scrollbar-primary::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-primary::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #4285F4;
          }
          .scrollbar-danger::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-danger::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-danger::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #ff3547;
          }
          .scrollbar-warning::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-warning::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-warning::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #FF8800;
          }
          .scrollbar-success::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-success::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }

          .scrollbar-success::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #00C851;
          }
          .scrollbar-info::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-info::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-info::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #33b5e5;
          }
          .scrollbar-default::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-default::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-default::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #2BBBAD;
          }
          .scrollbar-secondary::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-secondary::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-secondary::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #aa66cc;
          }
You can choose one of the following classes:
  • .scrollbar-primary
  • .scrollbar-secondary
  • .scrollbar-default
  • .scrollbar-info
  • .scrollbar-success
  • .scrollbar-warning
  • .scrollbar-danger

Gradient scrollbar 

        
            
          <div class="scrollbar scrollbar-lady-lips">
            <div class="force-overflow"></div>
          </div>
        
        
    
        
            
          .scrollbar-juicy-peach::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-juicy-peach::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-juicy-peach::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left top, right top, from(#ffecd2), to(#fcb69f));
            background-image: -webkit-linear-gradient(left, #ffecd2 0%, #fcb69f 100%);
            background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
          }
          .scrollbar-young-passion::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px; }
            .scrollbar-young-passion::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-young-passion::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left top, right top, from(#ff8177), color-stop(0%, #ff867a),
            color-stop(21%, #ff8c7f), color-stop(52%, #f99185), color-stop(78%, #cf556c), to(#b12a5b));
            background-image: -webkit-linear-gradient(left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%,
            #b12a5b 100%);
            background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%,
            #b12a5b 100%);
          }
          .scrollbar-lady-lips::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-lady-lips::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-lady-lips::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef),
            to(#fecfef));
            background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
            background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
          }
          .scrollbar-sunny-morning::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-sunny-morning::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-sunny-morning::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #f6d365 0%, #fda085 100%);
            background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
          }
          .scrollbar-rainy-ashville::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-rainy-ashville::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-rainy-ashville::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a6c1ee));
            background-image: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a6c1ee 100%);
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
          }
          .scrollbar-frozen-dreams::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-frozen-dreams::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-frozen-dreams::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#fdcbf1), color-stop(1%, #fdcbf1),
            to(#e6dee9));
            background-image: -webkit-linear-gradient(bottom, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
            background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
          }
          .scrollbar-warm-flame::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-warm-flame::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-warm-flame::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); }
            .scrollbar-night-fade::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-night-fade::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-night-fade::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));
            background-image: -webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);
            background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
          }
          .scrollbar-spring-warmth::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-spring-warmth::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-spring-warmth::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#fad0c4), to(#ffd1ff));
            background-image: -webkit-linear-gradient(bottom, #fad0c4 0%, #ffd1ff 100%);
            background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
          }
          .scrollbar-winter-neva::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-winter-neva::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-winter-neva::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #a1c4fd 0%, #c2e9fb 100%);
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
          }
          .scrollbar-dusty-grass::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-dusty-grass::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-dusty-grass::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
            background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
          }
          .scrollbar-tempting-azure::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-tempting-azure::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-tempting-azure::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #84fab0 0%, #8fd3f4 100%);
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
          }
          .scrollbar-heavy-rain::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-heavy-rain::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-heavy-rain::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#cfd9df), to(#e2ebf0));
            background-image: -webkit-linear-gradient(bottom, #cfd9df 0%, #e2ebf0 100%);
            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
          }
          .scrollbar-amy-crisp::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-amy-crisp::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-amy-crisp::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #a6c0fe 0%, #f68084 100%);
            background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
          }
          .scrollbar-mean-fruit::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-mean-fruit::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-mean-fruit::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #fccb90 0%, #d57eeb 100%);
            background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
          }
          .scrollbar-deep-blue::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-deep-blue::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-deep-blue::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #e0c3fc 0%, #8ec5fc 100%);
            background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
          }
          .scrollbar-ripe-malinka::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-ripe-malinka::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
            background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
          }
          .scrollbar-cloudy-knoxville::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-cloudy-knoxville::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-cloudy-knoxville::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #fdfbfb 0%, #ebedee 100%);
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
          }
          .scrollbar-morpheus-den::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-morpheus-den::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-morpheus-den::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
            background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
            background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
          }
          .scrollbar-rare-wind::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-rare-wind::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-rare-wind::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#a8edea), to(#fed6e3));
            background-image: -webkit-linear-gradient(bottom, #a8edea 0%, #fed6e3 100%);
            background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
          }
          .scrollbar-near-moon::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-near-moon::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-near-moon::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
            background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
            background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
          }
You can choose one of the following classes:
  • .scrollbar-juicy-peach
  • .scrollbar-young-passion
  • .scrollbar-lady-lips
  • .scrollbar-sunny-morning
  • .scrollbar-rainy-ashville
  • .scrollbar-frozen-dreams
  • .scrollbar-warm-flame
  • .scrollbar-night-fade
  • .scrollbar-spring-warmth
  • .scrollbar-winter-neva
  • .scrollbar-dusty-grass
  • .scrollbar-tempting-azure
  • .scrollbar-heavy-rain
  • .scrollbar-amy-crisp
  • .scrollbar-mean-fruit
  • .scrollbar-deep-blue
  • .scrollbar-ripe-malinka
  • .scrollbar-cloudy-knoxville
  • .scrollbar-morpheus-den
  • .scrollbar-rare-wind
  • .scrollbar-near-moon

Scrollbar options 

        
            
          <div class="scrollbar square scrollbar-lady-lips thin">
            <div class="force-overflow"></div>
          </div>
          <div class="scrollbar square scrollbar-lady-lips">
            <div class="force-overflow"></div>
          </div>
          <div class="scrollbar scrollbar-black bordered-black square thin">
            <div class="force-overflow"></div>
          </div>
          <div class="scrollbar scrollbar-black bordered-black square">
            <div class="force-overflow"></div>
          </div>
          <div class="scrollbar scrollbar-pink bordered-pink thin">
            <div class="force-overflow"></div>
          </div>
          <div class="scrollbar scrollbar-pink bordered-pink">
            <div class="force-overflow"></div>
          </div>
        
        
    
        
            
          .scrollbar-pink::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-pink::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-pink::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #ec407a;
          }
          .scrollbar-indigo::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-indigo::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-indigo::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #3f51b5;
          }
          .scrollbar-black::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-black::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-black::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #000;
          }
          .scrollbar-lady-lips::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-lady-lips::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-lady-lips::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef),
            to(#fecfef));
            background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
            background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
          }
          .scrollbar-near-moon::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-near-moon::-webkit-scrollbar {
            width: 12px;
           background-color: #F5F5F5;
          }
          .scrollbar-near-moon::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
            background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
            background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
          }
          .bordered-pink::-webkit-scrollbar-track {
            -webkit-box-shadow: none;
            border: 1px solid #ec407a;
          }
          .bordered-pink::-webkit-scrollbar-thumb {
            -webkit-box-shadow: none;
          }
          .bordered-indigo::-webkit-scrollbar-track {
            -webkit-box-shadow: none;
            border: 1px solid #3f51b5;
          }
          .bordered-indigo::-webkit-scrollbar-thumb {
            -webkit-box-shadow: none;
          }
          .bordered-black::-webkit-scrollbar-track {
            -webkit-box-shadow: none;
            border: 1px solid #000;
          }
          .bordered-black::-webkit-scrollbar-thumb {
            -webkit-box-shadow: none;
          }
          .square::-webkit-scrollbar-track {
            border-radius: 0 !important;
          }
          .square::-webkit-scrollbar-thumb {
            border-radius: 0 !important;
          }
          .thin::-webkit-scrollbar {
            width: 6px;
          }
You can choose one of the following classes:
  • .square
  • .thin
  • .bordered-primary
  • .bordered-secondary
  • .bordered-default
  • .bordered-info
  • .bordered-success
  • .bordered-warning
  • .bordered-danger
  • .bordered-black
  • .bordered-pink
  • .bordered-indigo

Scrollbar usage within cards

First news title

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Second news title

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Third news title

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Fourth news title

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

        
            
          <div class="row">
            <div class="col-md-6 mb-4">
              <mdb-card class="example-1 scrollbar-ripe-malinka">
                <mdb-card-body>
                  <h4 id="section1"><strong>First news title</strong></h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                    qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                    mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                    qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                    qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                    mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                    qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                </mdb-card-body>
              </mdb-card>
            </div>
            <div class="col-md-6 mb-4">
              <mdb-card class="example-1 square scrollbar-cyan bordered-cyan">
                <mdb-card-body>
                  <h4 id="section1"><strong>Second news title</strong></h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                    qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                    mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                    qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                    qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                    mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                    qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                </mdb-card-body>
              </mdb-card>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-4">
              <mdb-card class="example-1 scrollbar-deep-purple bordered-deep-purple thin">
                <mdb-card-body>
                  <h4 id="section1"><strong>Third news title</strong></h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                    qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                    mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                    qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                </mdb-card-body>
              </mdb-card>
            </div>
            <div class="col-md-6 mb-4">
              <mdb-card class="example-1 square scrollbar-dusty-grass square thin">
                <mdb-card-body>
                  <h4 id="section1"><strong>Fourth news title</strong></h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                    qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                    mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                    qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                    Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                </mdb-card-body>
              </mdb-card>
            </div>
          </div>
        
        
    
        
            
          .scrollbar-deep-purple::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-deep-purple::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-deep-purple::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #512da8;
          }
          .scrollbar-cyan::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-cyan::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-cyan::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #00bcd4;
          }
          .scrollbar-dusty-grass::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-dusty-grass::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-dusty-grass::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
            background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
          }
          .scrollbar-ripe-malinka::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
          }
          .scrollbar-ripe-malinka::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
          }
          .scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
            background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
          }
          .bordered-deep-purple::-webkit-scrollbar-track {
            -webkit-box-shadow: none;
            border: 1px solid #512da8;
          }
          .bordered-deep-purple::-webkit-scrollbar-thumb {
            -webkit-box-shadow: none;
          }
          .bordered-cyan::-webkit-scrollbar-track {
            -webkit-box-shadow: none;
            border: 1px solid #00bcd4;
          }
          .bordered-cyan::-webkit-scrollbar-thumb {
            -webkit-box-shadow: none;
          }
          .square::-webkit-scrollbar-track {
            border-radius: 0 !important;
          }
          .square::-webkit-scrollbar-thumb {
           border-radius: 0 !important;
          }
          .thin::-webkit-scrollbar {
            width: 6px;
          }
          .example-1 {
            position: relative;
            overflow-y: scroll;
            height: 200px;
          }

Angular SmoothScroll / Scrollbar - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Smooth Scroll.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { SmoothscrollModule, WavesModule } from 'ng-uikit-pro-standard'
Import example Modules list

Directives

PageScrollDirective

Selector: mdbPageScroll

Type: PageScrollDirective

Inputs

PageScrollDirective
Name Type Default Description Example
pageScrollHorizontal boolean false Whether the scroll should happen in vertical direction (false, default) or horizontal (true). [pageScrollHorizontal]="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). [pageScrollOffset]="100"
pageScrollDuration number 2000 Duration in milliseconds the whole scroll-animation should last. [pageScrollDuration]="1500"
pageScrollSpeed number 3000 Speed in Pixel/Second the animation should take. Only applied if no duration is set. [pageScrollSpeed]="1000"
pageScrollInterruptible boolean true Whether the scroll animation should stop if the user interferes with it (true) or not (false). [pageScrollInterruptible]="true"

Events

PageScrollDirective
Name Type Description Example
pageScrollFinish boolean 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. (pageScrollFinish)="onPageScrollFinish()"