Edit these docs Rate these docs

React Bootstrap Scrollbar & SmoothScroll

React Scrollbar & SmoothScroll - Bootstrap 4 & Material Design

React Bootstrap Scrollbar can be used on elements with content too wide or tall to wrap smoothly inside container. Smooth scroll is an animated movement from a trigger to another place of the same page.


Bootstrap SmoothScroll MDB Pro component

Click on the links below to see the live example

To achieve Smooth Scroll effect add a class .smooth-scroll to the parent element of your links



        import React from "react";
        import { MDBSmoothScroll } from "mdbreact";

        const ScrollSpyPage = () => {
          return (
            <div>
              <MDBSmoothScroll to="section1">Section 1</MDBSmoothScroll>
              <MDBSmoothScroll to="section2">Section 2</MDBSmoothScroll>

              <div id="section1">
                <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="section2">
                <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>
            </div>
          );
        }

        export default ScrollSpyPage;
      

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

Scrollbar


          import React from "react";
          import { MDBContainer, MDBScrollbar } from "mdbreact";
          import "./scrollbar.css";
          
          const ScrollBarPage = () => {
            const scrollContainerStyle = { width: "800px", maxHeight: "400px" };
            return (
              <MDBContainer>
                <div className="scrollbar scrollbar-primary  mt-5 mx-auto" style={scrollContainerStyle}>
                  <img
                    alt=""
                    src="https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg"
                  />
                </div>
          
                <div className="scrollbar my-5 mx-auto" style={scrollContainerStyle}>
                  <img
                    alt=""
                    src="https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg"
                  />
                </div>
              </MDBContainer>
            );
          }
          
          export default ScrollBarPage;
      

          .scrollbar {
            overflow: scroll;
          }
          
          .scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
          }
          
          .scrollbar::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            background: rgba(0, 0, 0, 0.2);
          }
          
          /* custom colors  */
          .scrollbar-primary::-webkit-scrollbar {
            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;
          }
      

Material colors scrollbar


        import React from 'react';
        import './scrollbar.css';

        export default () => {
          return (
            <div className="scrollbar scrollbar-primary">
              {content}
            </div>
          );
        }
      

        .scrollbar {
          overflow-y: scroll;
        }
        
        .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; }

      
Choose one of the following classes:
  • .scrollbar-primary
  • .scrollbar-secondary
  • .scrollbar-default
  • .scrollbar-info
  • .scrollbar-success
  • .scrollbar-warning
  • .scrollbar-danger

Gradient scrollbar


        import React from 'react';
        import './scrollbar.css';
        
        export default () => {
          return (
            <div className="scrollbar scrollbar-juicy-peach">
              {content}
            </div>
          );
        }
      

        .scrollbar {
        margin-left: 30px;
        float: left;
        height: 300px;
        width: 65px;
        background: #fff;
        overflow-y: scroll;
        margin-bottom: 25px; }
          
        .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%); }

      
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


        import React from 'react';
        import './scrollbar.css';
        
        export default () => {
          return (
            <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 {
        margin-left: 30px;
        float: left;
        height: 300px;
        width: 65px;
        background: #fff;
        overflow-y: scroll;
        margin-bottom: 25px; }
        
        .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; }
      
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

Material fading scrollbarMDB Pro component


          import React from "react";
          import { MDBContainer, MDBScrollbar } from "mdbreact";
          import "./scrollbar.css";
          
          const ScrollBarPage = () => {
            const outerContainerStyle = { width: "800px", height: "400px" };
            return (
              <div>
                <MDBContainer style={outerContainerStyle} className="mt-5">
                  <MDBScrollbar>
                    <img
                      alt=""
                      src="https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg"
                    />
                  </MDBScrollbar>
                </MDBContainer>
          
                <MDBContainer style={outerContainerStyle} className="my-5">
                  <MDBScrollbar className="scrollbar-primary">
                    <img
                      alt=""
                      src="https://mdbootstrap.com/img/Photos/Others/img%20(51).jpg"
                    />
                  </MDBScrollbar>
                </MDBContainer>
              </div>
            );
          }
          
          export default ScrollBarPage;          
      

        // use those classes to change scrollbar color

        .scrollbar-primary .ps__thumb-x, .scrollbar-primary .ps__thumb-y {
          background-color: #4285F4;
        }
        
        .scrollbar-primary .ps__rail-x:hover > .ps__thumb-x,
        .scrollbar-primary .ps__rail-x:focus > .ps__thumb-x {
          background-color: #4285F4;
        }
        
        .scrollbar-primary .ps__rail-y:hover > .ps__thumb-y,
        .scrollbar-primary .ps__rail-y:focus > .ps__thumb-y {
          background-color: #4285F4;
        }
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

React Scrollbar & SmoothScroll - API

In this section you will find advanced information about the Scrollbar & SmoothScroll component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


                import { MDBScrollbar, MDBSmoothScroll } from 'mdbreact';
            

API Reference: SmoothScroll properties

Name Type Default Description Example
active Boolean false Sets active state of the particular item (sets active state automatically when `spy` is active) <MDBSmoothScroll active to="section1" />
className String Sets custom class of the element <MDBSmoothScroll to="section1" className="customClass" />
disabled Boolean false Disables the element from being clicked or focused <MDBSmoothScroll to="section1" disabled />
duration Number 500 Duration in miliseconds of the scroll animation. <MDBSmoothScroll to="section1" duration="1000" />
offset Number -70 Amount of pixels on the top of the scroll destination element. <MDBSmoothScroll to="section1" offset={-200} />
smooth Boolean true Sets on/off the scroll animation. <MDBSmoothScroll to="section1" smooth={false} />
spy Boolean true Determines if elements should worry about `active` class binding. <MDBSmoothScroll to="section1" spy="false" />
to String Required! ID of the destination element for SmoothScroller. <MDBSmoothScroll to="section1" />
Button's styling props
btn Boolean false Required to work well with Button styling classes. Adds btn class to SmoothScroll <MDBSmoothScroll btn />
block Boolean false Create block level SmoothScroll <MDBSmoothScroll block />
outline Boolean false Renders SmoothScroll with outline, color property determines outline color <MDBSmoothScroll outline />
rounded Boolean false Adds rounded corners effect to SmoothScroll <MDBSmoothScroll rounded />
gradient String false Adds gradient background to SmoothScroll, accepts MDB predefined gradients <MDBSmoothScroll gradient="peach" />
floating Boolean false Adds floating effect to SmoothScroll <MDBSmoothScroll floating />
flat Boolean false Adds flat effect to SmoothScroll - SmoothScroll without backgorund and borders <MDBSmoothScroll flat />
social String Sets background color <MDBSmoothScroll social="fb" />
fixed Boolean false Sets position of SmoothScroll to fixed <MDBSmoothScroll fixed />
top String 'Fixed' property should be set on true. Sets top position of SmoothScroll <MDBSmoothScroll top="..." />
bottom String 45 'Fixed' property should be set on true. Sets bottom position of SmoothScroll <MDBSmoothScroll bottom="..." />
left String 'Fixed' property should be set on true. Sets left position of SmoothScroll <MDBSmoothScroll left="..." />
right String 24 'Fixed' property should be set on true. Sets left position of SmoothScroll <MDBSmoothScroll right="..." />

API Reference: ScrollBar properties

Name Type Default Description Example
className String Sets custom class of the element <MDBScrollBar className="customClass" />
containerRef function Attaches your callback ref to the scrolling container. <MDBScrollBar containerRef={el => this.ScrollRef = el} />

API Reference: ScrollBar Methods

Name Parameters Description Example
onScrollY ref Invoked when the y-axis is scrolled in either direction. <MDBScrollBar onScrollY={this.handleEvent} >
onScrollX ref Invoked when the x-axis is scrolled in either direction. <MDBScrollBar onScrollX={this.handleEvent} >
onScrollUp ref Invoked when scrolling upwards. <MDBScrollBar onScrollUp={this.handleEvent} >
onScrollDown ref Invoked when scrolling downwards. <MDBScrollBar onScrollDown={this.handleEvent} >
onScrollLeft ref Invoked when scrolling to the left. <MDBScrollBar onScrollLeft={this.handleEvent} >
onScrollRight ref Invoked when scrolling to the right. <MDBScrollBar onScrollRight={this.handleEvent} >
onYReachStart ref Invoked when scrolling reaches the start of the y-axis. <MDBScrollBar onYReachStart={this.handleEvent} >
onYReachEnd ref Invoked when scrolling reaches the end of the y-axis (useful for infinite scroll). <MDBScrollBar onYReachEnd={this.handleEvent} >
onXReachStart ref Invoked when scrolling reaches the start of the x-axis. <MDBScrollBar onXReachStart={this.handleEvent} >
onXReachEnd ref Invoked when scrolling reaches the end of the x-axis. <MDBScrollBar onXReachEnd={this.handleEvent} >