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

CSSオーバーフロー：スクロール

値がscrollのCSSオーバーフロープロパティ内 、オーバーフローがクリップされ、スクロールバーが追加されます。これにより、ユーザーはコンテンツ全体を読むことができます。

例

次のコードを実行して、CSS オーバーフローを実装することができます：scroll プロパティ-

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: orange;
            width: 250px;
            height: 45px;
            border: 2px solid blue;
            overflow: scroll;
         }
      </style>
   </head>
   <body>
      <h1>Heading</h1>
      <div>Overflow property used here. This is a demo text to show the working of CSS overflow: scroll. This won't hide the content. Now a scrollbar will be visible.</div>
   </body>
</html>

出力

CSSオーバーフロー：スクロール


  1. CSSを使用したスクロールアンカーの無効化

    Webブラウザが提供するデフォルトのスクロールアンカーを無効にするには、オーバーフローアンカーを使用できます。 プロパティ。 例 次の例は、オーバーフローアンカープロパティのアイデアを示しています- <!DOCTYPE html> <html> <head> <style> body {    overflow-anchor: none; } div{    display: flex;    flex-direction: row; } </style> </hea

  2. CSSを使用してスクロール上の固定ナビゲーションバーを作成するにはどうすればよいですか？

    CSSのpositionプロパティを指定することで、CSSを使用して固定ナビゲーションバーを作成できます。 CSSのpositionプロパティの構文は次のとおりです- Selector {    position: /*value*/; } 以下は、CSS位置プロパティの例です。 例 <!DOCTYPE html> <html> <head> <style> #navigation-bar {    overflow: hidden;    box-shadow: inset 0 0