Smooth scroll bar (on mouse scroll) without jquery?

Question

I want to implement smoothness while scrolling a page, for example this site link has the effect what I am talking about. I implemented the animation for scroll when clicked, but I want to implement smooth scroll while user scrolls using mousewheel. I am looking for a solution without jquery. (This is not a duplicate of any questions here in stackoverflow).

Possible duplicate of [Smooth scroll anchor links WITHOUT jQuery](https://stackoverflow.com/questions/17733076/smooth-scroll-anchor-links-without-jquery) — Kenneth Larsen, Aug 24 '17 at 09:41
no . idont want the to scroll only when clicked. i want to smoothen the effect of scroll when user scroll using mouse wheel — george B, Aug 24 '17 at 09:43
@george B, I don't recommend altering the default scroll behavior. There are many libraries out there that do this, but it's noticeable to the majority of users and can lead to a frustrating experience. Look up "scrolljacking" for more information. — Phix, Sep 04 '17 at 19:03
Half a year later but maybe this is useful to someone. This actually can be done easily with javascript, please take a look at https://stackoverflow.com/questions/7408100/can-i-change-the-scroll-speed-using-css-or-jquery (possible duplicate). Though I agree with Phix that this could be an indeed frustrating experience for end users, I do not think slight alteration is bad. What I really consider a bad practice is fixed scrolling that limits movement between sections — kravis, Feb 06 '18 at 21:49

score 0 · Answer 1 · answered Oct 04 '19 at 08:10

header
{
 font-family: 'Lobster', cursive;
 text-align: center;
 font-size: 25px; 
}

#info
{
 font-size: 18px;
 color: #555;
 text-align: center;
 margin-bottom: 25px;
}

a{
 color: #074E8C;
}

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

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

#wrapper
{
 text-align: center;
 width: 500px;
 margin: auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #D62929;
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
 width: 6px;
 background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
 background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
 background-color: #000000;
 border: 2px solid #555555;
}


/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb
{
 background-color: #0ae;
 
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
                    color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.5, transparent), to(transparent));
}


/*
 *  STYLE 6
 */

#style-6::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb
{
 background-color: #F90; 
 background-image: -webkit-linear-gradient(45deg,
                                           rgba(255, 255, 255, .2) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, .2) 50%,
             rgba(255, 255, 255, .2) 75%,
             transparent 75%,
             transparent)
}


/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-7::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(122,153,217)),
            color-stop(0.72, rgb(73,125,189)),
            color-stop(0.86, rgb(28,58,148)));
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track
{
 border: 1px solid black;
 background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
 background-color: #000000; 
}


/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb
{
 background-color: #F90; 
 background-image: -webkit-linear-gradient(90deg,
                                           rgba(255, 255, 255, .2) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, .2) 50%,
             rgba(255, 255, 255, .2) 75%,
             transparent 75%,
             transparent)
}


/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
                                           rgba(0, 0, 0, .2) 25%,
             transparent 25%,
             transparent 50%,
             rgba(0, 0, 0, .2) 50%,
             rgba(0, 0, 0, .2) 75%,
             transparent 75%,
             transparent)
}


/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}

#style-11::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-11::-webkit-scrollbar-thumb
{
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
                                           rgba(255, 255, 255, 0.5) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, 0.5) 50%,
             rgba(255, 255, 255, 0.5) 75%,
             transparent 75%,
             transparent)
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #444444;
}

#style-12::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}

#style-12::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
             transparent,
             rgba(0, 0, 0, 0.4) 50%,
             transparent,
             transparent)
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
             transparent,
             rgba(0, 0, 0, 0.4) 50%,
             transparent,
             transparent)
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
 background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
 background-color: #FFF;
 background-image: -webkit-linear-gradient(90deg,
                                           rgba(0, 0, 0, 1) 0%,
             rgba(0, 0, 0, 1) 25%,
             transparent 100%,
             rgba(0, 0, 0, 1) 75%,
             transparent)
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
            40% 0%,
            75% 84%,
            from(#4D9C41),
            to(#19911D),
            color-stop(.6,#54DE5D))
}

/*
 *  STYLE 16
 */

#style-16::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}

#style-16::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}

#style-16::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(top,
             #e4f5fc 0%,
             #bfe8f9 50%,
             #9fd8ef 51%,
             #2ab0ed 100%);
}

  <div id="wrapper">
    <div class="scrollbar" id="style-default">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-1">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-2">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-3">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-4">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-5">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-6">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-7">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-8">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-9">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-10">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-11">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-13">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-14">
      <div class="force-overflow"></div>
    </div>

    <div class="scrollbar" id="style-15">
      <div class="force-overflow"></div>
    </div>

Smooth scroll bar (on mouse scroll) without jquery?

1 Answers1