@itkyk/custom-scrollbar

Sample Text 1


あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら
、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、
顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、
しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

Sample Text 2


あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら
、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、
顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、
しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

Sample Text 3


あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら
、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、
顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、
しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。 
                
JavScript Code

                
                    
import {CustomScrollbar} from "@itkyk/custom-scrollbar";
new CustomScrollbar(".scroll-contents");

// スクロールバーの割合設定
// set height of scrollbar
const scrollbarWrapHeight = document.querySelector(".custom-scroll-wrap").getBoundingClientRect().height;
const contentsWrapHeight = document.querySelector(".custom-scroll-contents").getBoundingClientRect().height;
const contentsInnerHeight = document.querySelector(".custom-scrollbar-content-wrapper").getBoundingClientRect().height;
const ratio = contentsWrapHeight / contentsInnerHeight;
const scrollbar = document.querySelector(".custom-scroll-bar");
scrollbar.style.height = `${scrollbarWrapHeight * ratio}px`;
    
                
            
                
HTML Code

                
                    
<div class="scroll-contents">
    <div class="custom-scroll-contents">
      <h2>Sample Text 1</h2><br/>
            あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら
            <br/>、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
            <br/>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、
            <br/>顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
            <br/>いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、
            <br/>しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
            <h2>Sample Text 2</h2><br/>
            あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら
            <br/>、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
            <br/>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、
            <br/>顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、
            <br/>いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、
            <br/>しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
        </div>
        <div class="custom-scroll-wrap">
            <div class="custom-scroll-bar"></div>
        </div>
    </div>
</div>
    
                
            
                
CSS Code

                
                    
.scroll-contents {
    position: relative;
    width: 38.79941434846266vw;
    padding-right: 0.7320644216691069vw;
}
.custom-scroll-contents {
    width: 36.603221083455345vw;
    height: 29.282576866764277vw;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
}
.custom-scroll-wrap {
    position: absolute;
    top: 1.4641288433382138vw;
    right: 0.36603221083455345vw;
    height: 26.35431918008785vw;
    width: 10px;
    background-color: #ccc;
}
.custom-scroll-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 50px;
    background-color: #555;
}
Github
npm