React Bootstrap Scrollbar & SmoothScroll

React Scrollbar & 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

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

Click to scroll to section 1
Click to scroll to section 2

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

Show code

        
            
        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

Section 2

Smooth Scroll Example

Scrollbar

Show code

        
            
        import React from "react";
        import { MDBContainer } 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).webp"
                />
              </div>

              <div className="scrollbar my-5 mx-auto" style={scrollContainerStyle}>
                <img
                  alt=""
                  src="https://mdbootstrap.com/img/Photos/Others/img%20(51).webp"
                />
              </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 {
            scrollbar-color: #4285f4 #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

Show code

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

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

        
            
        .scrollbar {
          overflow-y: scroll;
        }
        .scrollbar-primary {
          scrollbar-color: #4285f4 #f5f5f5;
        }
        .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 {
          scrollbar-color: #ff3547 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #ff8800 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #00c851 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #33b5e5 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #2bbbad #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #aa66cc #f5f5f5;
        }
        
        .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

Show code

        
            
          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 {
          scrollbar-color: #ff9a9e #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #f6d365 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #a18cd1 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #d4fc79 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #fccb90 #f5f5f5;
        }
        .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 {
          scrollbar-color: #8ec5fc #f5f5f5;
        }
        .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 {
          scrollbar-color: #f5576c #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #330867 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #a8edea #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #b490ca #f5f5f5;
        }
        
        .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

Show code

        
            
          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 {
          scrollbar-color: #3f51b5 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #000 #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #ff9a9e #f5f5f5;
        }
        
        .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 {
          scrollbar-color: #b490ca #f5f5f5;
        }
        
        .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

Show code

        
            
          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).webp"
                    />
                  </MDBScrollbar>
                </MDBContainer>

                <MDBContainer style={outerContainerStyle} className="my-5">
                  <MDBScrollbar className="scrollbar-primary">
                    <img
                      alt=""
                      src="https://mdbootstrap.com/img/Photos/Others/img%20(51).webp"
                    />
                  </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;
          }

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

Show code

javascript

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

React Bootstrap Scrollbar & SmoothScroll

React Scrollbar & SmoothScroll - Bootstrap 4 & Material Design

Bootstrap SmoothScroll MDB Pro component

Click to scroll to section 1

Click to scroll to section 2

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

Material colors scrollbar

Choose one of the following classes:

Gradient scrollbar

Choose one of the following classes:

Scrollbar options

Choose one of the following classes:

Material fading scrollbarMDB Pro component

React Scrollbar & SmoothScroll - API

Import statement

API Reference: SmoothScroll properties

API Reference: ScrollBar properties

API Reference: ScrollBar Methods