JavaScript（脱jQuery）

「SimpleBar」プラグインを使ってスクロールバーを実装する

必要なファイル

simplebar.min.css
simplebar.min.js

SimpleBar（CDN）

【JS/CSS】横スクロールできるテーブルの作り方とスクロールバーのカスタマイズ

見出し1 見出し1の内容ダミーテキスト
ダミーテキストダミーテキストダミーテキスト		 見出し1の内容ダミーテキスト 見出し1の内容ダミーテキスト 見出し1の内容ダミーテキスト
見出し2 見出し2の内容ダミーテキスト 見出し2の内容
ダミーテキストダミーテキストダミーテキスト		 見出し2の内容ダミーテキスト 見出し2の内容ダミーテキスト
見出し3 見出し3の内容ダミーテキスト 見出し3の内容ダミーテキスト 見出し3の内容
ダミーテキストダミーテキストダミーテキスト		 見出し3の内容ダミーテキスト
CSS
                  
.table__scrollbar {
  padding: 0 0 20px 0;
  overflow-x: scroll;
  -ms-overflow-style: none;  /* IE, Edge 対応 */
  scrollbar-width: none;  /* Firefox 対応 */
  background-color: transparent;
}

.table__scrollbar::-webkit-scrollbar {
  display: none;  /* Chrome, Safari 対応 */
}

/* スクロールバーの背景部分をカスタマイズ */
.simplebar-track {
  height: 10px !important;
  background: #dddddd;
  border-radius: 5px;
}

/* スクロールバーの操作部分をカスタマイズ */
.simplebar-scrollbar::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px !important;
  margin: 0px;
  background: #888888;
  border-radius: 5px;
}

.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}