Safariでスクロールバーを非表示にする方法

以下のCSSコードを使用することで、Safariでスクロールバーを非表示にすることができます。

/* スクロールバーの非表示 */
::-webkit-scrollbar {
  display: none;
}

このコードでは、::-webkit-scrollbarセレクタを使用してスクロールバーを対象に指定し、display: noneを設定することで非表示にしています。

方法2: overflow: hiddenを使用する方法

もう一つの方法は、要素のoverflowプロパティをhiddenに設定することです。以下の例をご覧ください。

/* スクロールバーの非表示 */
.element {
  overflow: hidden;
}

この方法では、スクロールバー自体を非表示にするのではなく、要素内のコンテンツがはみ出すのを防ぐために要素のスクロールを無効にします。

方法3: JavaScriptを使用する方法

JavaScriptを使用することで、スクロールバーの表示/非表示を動的に制御することもできます。以下の例をご覧ください。

// スクロールバーの非表示
document.documentElement.style.overflow = 'hidden';

このコードでは、document.documentElement.style.overflowプロパティをhiddenに設定することで、ページ全体のスクロールバーを非表示にしています。

以上がSafariでスクロールバーを非表示にする方法です。ご希望の方法を選択し、ウェブサイトの要件に合わせて適用してください。また、ブラウザの互換性に注意しながら使用することをお勧めします。