CSSでページスクロールを無効にする方法

Web 開発を行う場合、特定のページ要素を修正し、スクロール ホイールでのスライドや画面に触れないようにする必要があることがよくあります。この際、CSSにはページのスクロールを防ぐためのメソッドがいくつか用意されており、本記事ではこれらのメソッドの実装手順と利用シーンを詳しく紹介します。

1. ページ全体のスクロールを無効にする

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

オーバーフローは、要素のオーバーフロー コンテンツを制御するために使用される CSS の属性です。 。その値には、表示、非表示、スクロール、自動などが含まれます。ページ全体のスクロールを無効にするには、ルート要素 html またはページ全体の本文に次のスタイルを追加するだけです:

html,body{
overflow: hidden;
}

このメソッドの原理は非常に単純で、ページ要素のオーバーフロー部分を非表示にすることで、ページのスクロールを禁止する効果を実現します。

2. position 属性と top 属性を使用する

このメソッドでは、ページ コンテンツをラップするコンテナ要素を追加し、そのコンテナ要素に固定の位置属性と top 属性を設定する必要があります。ページスクロール禁止を達成します。具体的なスタイルは次のとおりです:

.container{
位置: 固定;
上: 0;
左: 0;
右: 0;
下: 0 ;
}

ここでは、コンテナ要素の配置方法が固定に設定されています。これは、コンテナ要素がビューポートに対して固定されていることを意味します。top 属性は、要素とオブジェクトの上部の間の距離を意味します。ビューポートは 0 で、これはページのコンテンツがページのスクロールを防ぐためにページ上部のビューポートに固定されることを意味します。

2. 一部の要素のスクロールを無効にする

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

この方法は、ページ全体のスクロールを無効にするのと同じです。スクロールを無効にする必要があります。要素のオーバーフロー属性を非表示に設定するだけです。例:

.content{
overflow: hidden;
}

2. Use Position

ページ全体のスクロールを無効にする方法と同様に、無効にする必要がある要素をラップするコンテナ要素を追加し、固定位置とトップ属性をコンテナ要素、例:

.wrapper {
位置: 固定;
上: 0;
左: 0;
右: 0;
}
.content{
height: 1000px;
overflow : auto;
}

ここでは、スクロールを禁止する必要がある要素をコンテナ要素内に配置し、そのスタイルを要素がサイズを超えた後に自動的に表示されるスクロール バー: overflow: auto が追加され、コンテナー要素がスクロールを無効にする効果を実現するには、上記の方法を使用します。

上記はページスクロールを禁止するCSSの方法です。ただし、この方法はパフォーマンス上ページのスクロールを無効にするだけであり、実際には、ユーザーはブラウザを使用して前後に移動したり、スクロール バーをドラッグしたりするなど、他の操作によってページをスクロールできます。したがって、特定の実際のアプリケーションでは、特定のニーズに応じて適切な最適化と改善を実行する必要があります。

以上がCSSでページスクロールを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。