JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yaireo.github.io/fakescroll/fakescroll.js"></script>
<section>
            <div class='foo foo--inside'>

                <p>江戸を東京と改称する構想は、江戸時代後期の経世家である佐藤信淵が文政6年（1823年）に著した『混同秘策』にすでに現れていた[8][9]。佐藤は、日本が世界に躍り出るためにはそもそも日本の守りを強固にする必要があるので、そのためには、都は江戸に移し、江戸を「東京」と呼び、大阪を「西京」と呼び、東京・西京・京都の三京にする、という構想を記したのである。


大久保利通が「東京」と改称することを提案
大久保利通が佐藤の書に影響を受けて江戸を東京と改称することを建言したという[8]。

1868年9月（慶応4年（明治元年）7月）に出された『江戸ヲ称シテ東京ト為スノ詔書』において江戸の町奉行支配地域を管轄する東京府が設置されると書かれたことにより「東京」という名称が用いられることになった。

こうして「東京」と表記されることは決まったのだが、読み方については根拠となるような法令が出たわけでもなかった。「とうきやう」（呉音）が正規に使われたが、明治20年代前半頃は漢音読みの習慣も残っていたため「とうけい」の読みも少なくなかった[10]。日刊新聞の発達により人々が情報を共有する機会が広がり、第1期国定国語教科書で「東京」の振り仮名が「トーキョー」と表記され、混在はなくなった。なお漢字については、昭和初期までは「東亰」という表記も混用されていた[11]。この「亰」という文字は「京」の異体字である[12]。「亰」を使ったのは、中国の東京（Dongjing、ドンジン）との混同を防ぐためともいわれるが、後に同じ字となった。</p>
            </div>
        </section>

CSS

html, body{ height:100%; }

            body{
                margin:0; font:14px Arial;
            }

            a{ position:fixed; top:10px; left:10px; color:#FFF; font-size:1.3em; padding:1em; opacity:.5; text-decoration:none; z-index:1; }
            a:hover{ opacity:1; }

            section{
                border:2px solid rgba(0,0,0,.4);
                height:100%;
                position: relative;
                background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 100%);
                background-image: -moz-radial-gradient(   top, circle cover, #3c3b52 0%, #252233 100%);
                background-image: -o-radial-gradient(     top, circle cover, #3c3b52 0%, #252233 100%);
                background-image: radial-gradient(        top, circle cover, #3c3b52 0%, #252233 100%);
                background: #252233;
            }

            .foo{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; min-height:70%; height:1px; width:500px; overflow:auto; background:white; }
            .foo.fakeScroll__scope{ background:none; }
            .foo .fakeScroll__content{ padding-top:1em; padding-bottom:1em; }
            .foo .fakeScroll__wrap{ background:#FFF; border-radius:4px; -moz-box-sizing:border-box; box-sizing:border-box; }

            /* upper and bottom fades */
            .fakeScroll__wrap::before{ content:''; position:absolute; z-index:1; top:0; left:0; right:0; height:5%;
                background: -webkit-linear-gradient(#FFF 0%, rgba(255,255,255,0) 100%);
                background: -o-linear-gradient(#FFF 0%, rgba(255,255,255,0) 100%);
                background: linear-gradient(#FFF 0%, rgba(255,255,255,0) 100%);
            }

            .fakeScroll__wrap::after{ content:''; position:absolute; z-index:1; bottom:0; left:0; right:0; height:5%;
                background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, #FFF 100%);
                background: -o-linear-gradient(rgba(255,255,255,0)...

JavaScript

document.querySelector('.foo--inside').fakeScroll({
                track : "smooth"
            });