JSFiddle - React, Tailwind, and code Playground

by maroKanatani

HTML

<div class="scrollbar">
    <div class="inner"></div>
  </div>
<div class="wrapper">
  <div class="content">
    雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ
    丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズイツモシヅ
    カニワラッテヰル一日ニ玄米四合ト味噌ト少シノ
    野菜ヲタベアラユルコトヲジブンヲカンジョウニ入レズニヨク
  </div>
</div>

CSS

.wrapper {
   width: 300px;
   overflow-x: scroll;
}

.content {
  background-color: aqua;
  width: 600px;
}


.scrollbar {
  width: 300px;
  height: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
}
.inner {
  height: 1px;
  width: 600px;
}

.wrapper::-webkit-scrollbar {
  display: none;
}

JavaScript

const targetClasses = ['wrapper', 'scrollbar']

for(const targetClass of targetClasses) {
	document.querySelector(`.${targetClass}`).addEventListener('scroll', function () {
  	const otherClass = this.className.includes(targetClasses[0]) ? targetClasses[1] : targetClasses[0];
    const left = document.querySelector(`.${targetClass}`).scrollLeft;
    document.querySelector(`.${otherClass}`).scrollTo(left, 0);
  })
}