CSSはスクロールバーを非表示にしますが、スクロールは可能です

Web アプリケーションの継続的な開発により、Web デザインはますますインタラクティブになってきています。一般的なインタラクティブ要素として、スクロール バーがよく使用されます。しかし、ページをよりシンプルで美しく見せるために、スクロール バーを非表示にしたい場合もあります。この記事ではcssを使ってスクロールバーを非表示にしつつもスクロールできるようにする方法を紹介します。

1. CSS のオーバーフロー属性を使用する

CSS のオーバーフロー属性を使用して、要素のオーバーフロー コンテンツを制御できます。オーバーフロー属性には、visible (デフォルト値)、hidden、scroll、auto の 3 つのパラメータ値があります。

1. hidden

この属性値は、要素とそのサブ要素を非表示にするために使用されます。コンテンツが長すぎる場合は、すぐに切り取られ、エリア外に非表示になります。

2.scroll

scroll 属性値を使用して、要素内にスクロール バーを作成できます。コンテンツが長すぎて一度に画面に収まらない場合は、スクロール バーを使用してすべてをスクロールできます。

スクロールを使用すると、「スクロール バーを非表示にしてもスクロールできる」という効果が得られます。要素に固定の高さと幅を設定し、コンテンツをオーバーフローさせ、「overflow:scroll」を使用してスクロール バーを表示できます。

3. auto

最後に、「auto」属性値が得られます。この属性値は、コンテンツが大きすぎる場合など、必要に応じてブラウザがスクロール バーを自動的に追加することを指定します。コンテンツがコンテナを超えない場合、スクロール バーは表示されません。

2. スクロール バーを非表示にする

したがって、「overflow:hidden」を使用してスクロール バーを非表示にできます。これにより、スクロールバーが非表示になり、スクロールが無効になります。

.スクロール バーを非表示にする {
overflow: hidden;
}

ただし、この場合、スクロール バーでコンテンツをスクロールすることはできません。したがって、目的の効果を達成するには、別の方法を使用する必要があります。以下は、「overflow:hidden」を使用してスクロールバーを非表示にする基本的な例です。

3. 引き続きスクロール可能

次の質問は、コンテンツを引き続きスクロール可能にする方法です。 JavaScript を使用すると、この問題を解決できます。モバイル デバイスではスクロールバーが表示されるため、ユーザーが使用しているデバイスの種類を検出する必要があります。

以下に、スクロール バーの動作を制御できるメソッドを示します。 jQueryライブラリに依存します。

$(document).ready(function(){
if(navigator.userAgent.indexOf('Mac OS X') != -1 || navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1){

$('body').css({
  'overflow-y': 'scroll',
  '-webkit-overflow-scrolling': 'touch'
});

} else {

$('body').css('overflow-y', 'scroll');

}
});

このコードは、PC または Android デバイスで閲覧するときに標準のスクロール バーを有効にします。 Apple デバイスでは同様のスクロールバーが使用されますが、ネイティブの iOS スクロールバーをエミュレートします。スクロールバーまたはページをタッチすると、コンテンツをスクロールできます。

もちろん、これが唯一の方法ではありません。 JavaScript に依存せずに CSS を通じて同様の効果を実現することもできます。要素の高さと幅を設定し、「overflow:hidden」を使用してスクロールバーを非表示にし、「-webkit-overflow-scrolling:touch」を使用して慣性スクロールを有効にすることができます。

.慣性スクロールを有効にする {
高さ: 100%;
幅: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}

4. 結論

この記事では、CSS を使用してスクロール バーを非表示にしつつもスクロールする方法を学びました。オーバーフロー属性と JavaScript を使用してこの効果を実現する 2 つの方法について説明しました。各方法には独自の長所と短所があります。最終的な決定はお客様のニーズによって異なります。より柔軟で移植可能なソリューションが必要な場合は、JavaScript を使用してください。スクロールバーを非表示にするだけでスクロールできるようにする必要がある場合は、CSS を使用します。

以上がCSSはスクロールバーを非表示にしますが、スクロールは可能ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。