Vue Scrollbar and SmoothScroll

Vue Bootstrap Scrollbar and SmoothScroll

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Vue Bootstrap smooth scroll is an animated movement from a trigger - button, link or any other clickable element - 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 the directive must first be imported and declared as such in on the Vue instance. For Vue to be able to distinguish it as a directive (as opposed to, say, props), it must be added onto a designated anchor element, styled as v-mdb-smooth.

Show code

template
script

        
            
        <template>
          <main>
            <!--Navigation links with a v-mdb-smooth directive-->
            <mdb-row>
              <ul class="smooth-scroll list-unstyled">
                <li>
                  <h5><a href="#test1" v-mdb-smooth>Click to scroll to section 1</a></h5>
                </li>
                <br>
                <li>
                  <h5><a href="#test2" v-mdb-smooth>Click to scroll to section 2</a></h5>
                </li>
                <br>
              </ul>
            </mdb-row>
            <!--Dummy sections some distance away with IDs coressponding with the links above-->
            <div id="test1">
              <h3>Section 1</h3>
              <hr>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
            </div>
            <div id="test2">
              <h3>Section 2</h3>
              <hr>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
              <h5>Smooth Scroll Example</h5>
            </div>
          </main>
        </template>

        
            
          <script>
            import {
              mdbRow,
              mdbSmooth
            } from 'mdbvue';
            export default {
              name: "SmoothScrollPage",
              components: {
                mdbRow,
              },
              directives: {
                mdbSmooth
              }
            }
          </script>

Section 1

Smooth Scroll Example

Section 2

Smooth Scroll Example

Perfect scrollbar for an image

Scrollbar can be used with image.

Show code

template
script

        
            
      <template>
        <mdb-scrollbar height="400px" width="800px">
          <img src="https://mdbootstrap.com/img/Photos/Others/food3.webp" />
        </mdb-scrollbar>
      </template>

        
            
        <script>
          import {
            mdbScrollbar
          } from 'mdbvue';
          export default {
            name: 'ScrollbarPage',
            components: {
              mdbScrollbar
            }
          }
        </script>

Material colors scrollbar

Scrollbar can be colored in material design colors.

Show code

template
script
style

        
            
      <template>
        <mdb-row>
          <mdb-col class="scrollbar scrollbar-primary">
            <div class="force-overflow"></div>
          </mdb-col>
        </mdb-row>
      </template>

        
            
        <script>
          import {
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: "MaterialScrollbarPage",
            components: {
              mdbRow,
              mdbCol
            }
          }
        </script>

        
            
          <style scoped>
            .force-overflow {
              min-height: 450px;
            }

            .scrollbar {
              float: left;
              height: 300px;
              width: 150px;
              background: #fff;
              overflow-y: scroll;
              margin-bottom: 25px;
            }

            .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;
            }
          </style>

Choose one of the following classes:

.scrollbar-primary
.scrollbar-secondary
.scrollbar-default
.scrollbar-info
.scrollbar-success
.scrollbar-warning
.scrollbar-danger

Gradient scrollbar

Scrollbar can be colored with gradient.

Show code

template
script
style

        
            
      <template>
        <mdb-row>
          <mdb-col class="scrollbar scrollbar-lady-lips">
            <div class="force-overflow"></div>
          </mdb-col>
        </mdb-row>
      </template>

        
            
        <script>
          import {
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: "GradientScrollbarPage",
            components: {
              mdbRow,
              mdbCol
            }
          }
        </script>

        
            
          <style>
            .force-overflow {
              min-height: 450px;
            }

            .scrollbar {
              float: left;
              height: 300px;
              width: 150px;
              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 bottom, #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 bottom, #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%);
            }
          </style>

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

Depending on the style in which you would like your scrollbar, we have prepared several different types.

Show code

template
script
style

        
            
      <template>
        <mdb-row>
          <mdb-col class="scrollbar square scrollbar-lady-lips thin">
            <div class="force-overflow"></div>
          </mdb-col>
          <mdb-col class="scrollbar square scrollbar-lady-lips">
            <div class="force-overflow"></div>
          </mdb-col>
          <mdb-col class="scrollbar scrollbar-black bordered-black square thin">
            <div class="force-overflow"></div>
          </mdb-col>
          <mdb-col class="scrollbar scrollbar-black bordered-black square">
            <div class="force-overflow"></div>
          </mdb-col>
          <mdb-col class="scrollbar scrollbar-pink bordered-pink thin">
            <div class="force-overflow"></div>
          </mdb-col>
          <mdb-col class="scrollbar scrollbar-pink bordered-pink">
            <div class="force-overflow"></div>
          </mdb-col>
        </mdb-row>
      </template>

        
            
        <script>
          import {
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: "ScrollbarOptionsPage",
            components: {
              mdbRow,
              mdbCol
            }
          }
        </script>

        
            
          <style>
            .force-overflow {
              min-height: 450px;
            }

            .scrollbar {
              float: left;
              height: 300px;
              width: 150px;
              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;
            }
          </style>

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

Scrollbar can also be used inside the cards.

First title of the news

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 title of the news

Third title of the news

Fourth title of the news

Show code

template
script
style

        
            
      <template>
        <section>
          <!-- Grid row -->
          <mdb-row>
            <!-- Grid column -->
            <mdb-col md="6" class="mb-4">
              <!-- Exaple Card -->
              <mdb-card class="example-card scrollbar-ripe-malinka">
                <mdb-card-body>
                  <h4 id="section1"><strong>First title of the news</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>
              <!-- Exaple Card -->
            </mdb-col>
            <!-- Grid column -->
            <!-- Grid column -->
            <mdb-col md="6" class="mb-4">
              <!-- Exaple Card -->
              <mdb-card class="example-card square scrollbar-cyan bordered-cyan">
                <mdb-card-body>
                  <h4 id="section2"><strong>Second title of the news</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>
              <!-- Exaple Card -->
            </mdb-col>
            <!-- Grid column -->
            <!-- Grid column -->
            <mdb-col md="6" class="mb-4">
              <!-- Exaple Card -->
              <mdb-card class="example-card scrollbar-deep-purple bordered-deep-purple thin">
                <mdb-card-body>
                  <h4 id="section3"><strong>Third title of the news</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>
              <!-- Exaple Card -->
            </mdb-col>
            <!-- Grid column -->
            <!-- Grid column -->
            <mdb-col md="6" class="mb-4">
              <!-- Exaple Card -->
              <mdb-card class="example-card square scrollbar-dusty-grass square thin">
                <mdb-card-body>
                  <h4 id="section4"><strong>Fourth title of the news</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>
              <!-- Exaple Card -->
            </mdb-col>
            <!-- Grid column -->
          </mdb-row>
        </section>
      </template>

        
            
        <script>
          import {
            mdbRow,
            mdbCol,
            mdbCard,
            mdbCardBody
          } from 'mdbvue';
          export default {
            name: "SmoothScrollPage",
            components: {
              mdbRow,
              mdbCol,
              mdbCard,
              mdbCardBody
            }
          }
        </script>

        
            
          <style>
            .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-card {
              position: relative;
              overflow-y: scroll;
              height: 200px;
            }
          </style>

Scrollbar within form MDB Pro component

Sign up

Your name

Your surname

Your email

Your password

Forgot Password?

or Sign in with:

SIGN UP

Name

Surname

Password

Accept the Terms and Conditions

Have an account? Log in

Show code

template
script
style

        
            
      <template>
        <mdb-row>
          <mdb-col class="mb-4" md="10" lg="8" xl="5">
            <section class="form-elegant scrollbar-light-blue">
              <mdb-card>
                <mdb-card-body class="mx-4">
                  <div class="text-center">
                    <h3 class="dark-grey-text mb-5"><strong>Sign in</strong></h3>
                  </div>
                  <mdb-input label="Your email" type="email" />
                  <mdb-input label="Your password" type="password" containerClass="mb-0" />
                  <p class="font-small blue-text d-flex justify-content-end pb-3">Forgot
                    <a href="#" class="blue-text ml-1"> Password?</a></p>
                  <div class="text-center mb-3">
                    <mdb-btn type="button" gradient="blue" rounded class="btn-block z-depth-1a">Sign in</mdb-btn>
                  </div>
                  <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
                    with:</p>
                  <div class="row my-3 d-flex justify-content-center">
                    <mdb-btn type="button" color="white" rounded class="mr-md-3 z-depth-1a">
                      <mdb-icon fab icon="facebook-f" class="blue-text text-center" />
                    </mdb-btn>
                    <mdb-btn type="button" color="white" rounded class="mr-md-3 z-depth-1a">
                      <mdb-icon fab icon="twitter" class="blue-text" />
                    </mdb-btn>
                    <mdb-btn type="button" color="white" rounded class="z-depth-1a">
                      <mdb-icon fab icon="google-plus-g" class="blue-text" />
                    </mdb-btn>
                  </div>
                </mdb-card-body>
                <mdb-modal-footer class="mx-5 pt-3 mb-1">
                  <p class="font-small grey-text d-flex justify-content-end">Not a member?
                    <a href="#" class="blue-text ml-1"> Sign Up</a></p>
                </mdb-modal-footer>
              </mdb-card>
            </section>
          </mdb-col>
          <mdb-col class="mb-4" md="10" lg="8" xl="5">
            <section class="form-dark scrollbar-dusty-grass thin square">
              <mdb-card class="card-image"
                :style="{'backgroundImage': 'url(https://mdbootstrap.com/img/Photos/Others/pricing-table7.webp)'}">
                <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
                  <div class="text-center">
                    <h3 class="white-text mb-5 mt-4 font-weight-bold"><strong>SIGN</strong>
                      <a class="green-text font-weight-bold"><strong> UP</strong></a></h3>
                  </div>
                  <mdb-input label="Your email" type="text" />
                  <mdb-input label="Your password" type="password" />
                  <mdb-input class="my-5" type="checkbox" id="defaultCheck17" label="Accept the Terms and Conditions" />
                  <mdb-row class="d-flex align-items-center mb-4">
                    <div class="text-center mb-3 col-md-12">
                      <mdb-btn color="success" rounded type="button" class="btn-block z-depth-1">Sign in</mdb-btn>
                    </div>
                  </mdb-row>
                  <mdb-col md="12">
                    <p class="font-small white-text d-flex justify-content-end">Have an account?
                      <a href="#" class="green-text ml-1 font-weight-bold"> Log in</a></p>
                  </mdb-col>
                </div>
              </mdb-card>
            </section>
          </mdb-col>
        </mdb-row>
      </template>

        
            
      <script>
        import {
          mdbRow,
          mdbCol,
          mdbInput,
          mdbTextarea,
          mdbBtn,
          mdbIcon,
          mdbCard,
          mdbCardBody,
          mdbModalFooter
        } from 'mdbvue';
        export default {
          name: 'FormsPage',
          components: {
            mdbRow,
            mdbCol,
            mdbInput,
            mdbTextarea,
            mdbBtn,
            mdbIcon,
            mdbCard,
            mdbCardBody,
            mdbModalFooter
          }
        }
      </script>

        
            
      <style>
        .form-elegant,
        .form-dark {
          height: 500px;
          overflow-y: scroll;
        }
        .form-elegant .font-small {
          font-size: 0.8rem;
        }
        .form-elegant .z-depth-1a {
          -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
          box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
        }
        .form-elegant .z-depth-1-half,
        .form-elegant .btn:hover {
          -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
          box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
        }
        .form-dark .font-small {
          font-size: 0.8rem;
        }
        .form-dark [type="radio"]+label,
        .form-dark [type="checkbox"]+label {
          font-size: 0.8rem;
        }
        .form-dark [type="checkbox"]+label:before {
          top: 2px;
          width: 15px;
          height: 15px;
        }
        .form-dark .md-form label {
          color: #fff;
        }
        .form-dark input[type=text]:focus:not([readonly]) {
          border-bottom: 1px solid #00C851;
          -webkit-box-shadow: 0 1px 0 0 #00C851;
          box-shadow: 0 1px 0 0 #00C851;
        }
        .form-dark input[type=text]:focus:not([readonly])+label {
          color: #fff;
        }
        .form-dark input[type=password]:focus:not([readonly]) {
          border-bottom: 1px solid #00C851;
          -webkit-box-shadow: 0 1px 0 0 #00C851;
          box-shadow: 0 1px 0 0 #00C851;
        }
        .form-dark input[type=password]:focus:not([readonly])+label {
          color: #fff;
        }
        .form-dark input[type="checkbox"]+label:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 17px;
          height: 17px;
          z-index: 0;
          border: 1.5px solid #fff;
          border-radius: 1px;
          margin-top: 2px;
          -webkit-transition: 0.2s;
          transition: 0.2s;
        }
        .form-dark input[type="checkbox"]:checked+label:before {
          top: -4px;
          left: -3px;
          width: 12px;
          height: 22px;
          border-style: solid;
          border-width: 2px;
          border-color: transparent #00c851 #00c851 transparent;
          -webkit-transform: rotate(40deg);
          -ms-transform: rotate(40deg);
          transform: rotate(40deg);
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          -webkit-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
        }
        .scrollbar-light-blue::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #F5F5F5;
          border-radius: 10px;
        }
        .scrollbar-light-blue::-webkit-scrollbar {
          width: 12px;
          background-color: #F5F5F5;
        }
        .scrollbar-light-blue::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #82B1FF;
        }
        .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%);
        }
        .square::-webkit-scrollbar-track {
          border-radius: 0 !important;
        }
        .square::-webkit-scrollbar-thumb {
          border-radius: 0 !important;
        }
        .thin::-webkit-scrollbar {
          width: 6px;
        }
      </style>