勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法

  JavaScript

CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン(見た目)が異なる。また(個人的には)、ChromeやEdgeはスクロールバーが見つけやすいが、Firefoxは見つけにくかったりする。これを何とかならないか調べたところ「SimpleBar」ライブラリが良さそう。以下に実装方法をメモ。

 

サンプル

https://taitan916.info/sample/SimpleBar/

 

SimpleBar

公式サイト

https://grsmto.github.io/simplebar/

CDN

CDNで使う場合は以下を記述する。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">

 

利用方法

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.title{
font-weight: bold;
}
.contents{
width: 200px;
overflow: auto;
white-space: nowrap;
height: 200px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
</style>
<div class="title">通常のスクロールバー</div>
<div class="contents">
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
</div>
<div class="title">SimpleBar</div>
<div class="contents" data-simplebar>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
</div>
<script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">
<style> .title{ font-weight: bold; } .contents{ width: 200px; overflow: auto; white-space: nowrap; height: 200px; border: 1px solid #ccc; margin-bottom: 20px; } </style> <div class="title">通常のスクロールバー</div> <div class="contents"> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> </div> <div class="title">SimpleBar</div> <div class="contents" data-simplebar> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br> </div> <script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">
<style>
.title{
    font-weight: bold;
}
.contents{
    width: 200px;
    overflow: auto;
    white-space: nowrap;
    height: 200px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}
</style>

<div class="title">通常のスクロールバー</div>
<div class="contents">
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
</div>

<div class="title">SimpleBar</div>
<div class="contents" data-simplebar>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
    コンテンツ/コンテンツ/コンテンツ/コンテンツ/コンテンツ<br>
</div>

<script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/simplebar@6.2.7/dist/simplebar.min.css" rel="stylesheet">

適用させたい要素に対して「data-simplebar」を付与すること。

JavaScriptやjQueryで個別に適用させたい場合はドキュメントを参照すること。

 - JavaScript

  関連記事

JavaScriptライブラリChart.jsでグラフの描写する方法

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...

JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法

文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...

JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)

JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...

S