スクロール機能を維持しながらスクロールバーを隠す

overflow: hidden を使用してスクロールバーを無効にしても、スクロール機能が失われます。この問題に対処するために、CSS ラッパーと JavaScript 計算を組み合わせた代替ソリューションが存在します。

JavaScript と CSS のソリューション

次の CSS および JavaScript コードを使用します。

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth   "px";

CSS でスクロールバーを非表示にし、実際のコンテンツの幅に一致するようにラッパーの幅を調整することで、マウスによるスクロール機能を維持できます。

追加テクニック

スクロールバーを表示せずにスクロール可能な div を作成するには、同じ原理を使用します。 overflow-y:scroll; を追加するだけです。プロパティを内部要素に追加します。