CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

エキスパート ガイド:ユーザー エクスペリエンスに影響を与えずに CSS でスクロールバーを非表示にする

CSS を使用してスクロールバーを非表示にするためのさまざまな方法を理解します。スクロールバーは、ユーザーが表示可能なウィンドウよりも大きいコンテンツ領域を移動できるようにする Web ブラウザーのコア コンポーネントです。 overflow を使用すると、スクロール機能を維持しながらスクロールバーを非表示にすることができます。 プロパティ。

構文

selector {
 overflow-x: value;
 overflow-y: value;
}
/* Or shorthand */
selector {
 overflow: value;
}

可能な値

値 説明 visible コンテンツはクリップされず、要素hiddenの外側にレンダリングされる可能性があります コンテンツがクリップされ、スクロールバーが非表示になりますscroll コンテンツはクリップされますが、スクロールバーは常に表示されますauto スクロールバーはコンテンツがオーバーフローした場合にのみ表示されます

方法 1:垂直スクロールバーを非表示にする

水平スクロールを有効にしたまま垂直スクロールバーを非表示にするには、overflow-y: hidden を設定します。 と overflow-x: scroll 

<!DOCTYPE html>
<html>
<head>
<style>
 .container {
 height: 150px;
 width: 300px;
 overflow-y: hidden;
 overflow-x: scroll;
 border: 2px solid #333;
 padding: 10px;
 }
 .content {
 white-space: nowrap;
 width: 500px;
 background-color: #f0f8ff;
 }
</style>
</head>
<body>
 <div class="container">
 <div class="content">
 This is a very long line of text that will extend beyond the container width and require horizontal scrolling to view completely.
 </div>
 <p>More content here that would normally cause vertical scrolling.</p>
 <p>But the vertical scrollbar is hidden.</p>
 </div>
</body>
</html>

A bordered container with horizontal scrollbar visible at the bottom, but no vertical scrollbar. The content extends horizontally and can be scrolled left/right.

方法 2:水平スクロールバーを非表示にする

垂直スクロールを有効にしたまま水平スクロールバーを非表示にするには、overflow-x: hidden を設定します。 と overflow-y: scroll 

<!DOCTYPE html>
<html>
<head>
<style>
 .container {
 height: 150px;
 width: 300px;
 overflow-x: hidden;
 overflow-y: scroll;
 border: 2px solid #333;
 padding: 10px;
 }
 .content {
 background-color: #fff3cd;
 line-height: 1.5;
 }
</style>
</head>
<body>
 <div class="container">
 <div class="content">
 <p>This is paragraph one with normal text content.</p>
 <p>This is paragraph two with more content.</p>
 <p>This is paragraph three adding even more text.</p>
 <p>This is paragraph four to create overflow.</p>
 <p>This is paragraph five for vertical scrolling.</p>
 </div>
 </div>
</body>
</html>

A bordered container with vertical scrollbar visible on the right side, but no horizontal scrollbar. The content extends vertically and can be scrolled up/down.

方法 3:両方のスクロールバーを非表示にする

水平スクロールバーと垂直スクロールバーの両方を完全に非表示にするには、両方の overflow-x を設定します。 と overflow-y hiddenまで 

<!DOCTYPE html>
<html>
<head>
<style>
 .container {
 height: 150px;
 width: 300px;
 overflow: hidden;
 border: 2px solid #333;
 padding: 10px;
 }
 .content {
 background-color: #d1ecf1;
 width: 500px;
 line-height: 1.5;
 }
</style>
</head>
<body>
 <div class="container">
 <div class="content">
 <p>This content extends both horizontally and vertically beyond the container boundaries.</p>
 <p>However, no scrollbars are visible, so the overflowing content is simply clipped.</p>
 <p>Users cannot scroll to see the hidden content.</p>
 </div>
 </div>
</body>
</html>

A bordered container with no visible scrollbars. Content that extends beyond the container boundaries is clipped and hidden from view.

結論

CSS overflow を使用してスクロールバーを非表示にする プロパティはよりクリーンなインターフェイスを作成します。 overflow: hidden を使用してください スクロールバーを完全に非表示にするか、overflow-x で水平スクロールと垂直スクロールを選択的に制御します。 および overflow-y プロパティ。

エキスパート ガイド:ユーザー エクスペリエンスに影響を与えずに CSS でスクロールバーを非表示にする


  1. CSSとJavaScriptを使用してレスポンシブスライドショーを作成するにはどうすればよいですか？

    以下は、CSSとJavaScriptを使用してレスポンシブスライドショーを作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * {    box-sizing: border-box; } .Slide {    display: none; } img {

  2. CSSを使用したロケーションカラーの設定停止

    カラーストップの位置は、パーセンテージまたは絶対長として設定できます。たとえば、線形グラデーションの場合 background-image: linear-gradient(    rgb(61, 255, 2) 40%,    rgb(0, 174, 255) 80%,    rgb(255, 29, 29) 20% ); 以下は、CSS-を使用して線形グラデーションで位置の色の停止を設定するためのコードです。 例 <!DOCTYPE html> <html> <head> <style&