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

純粋なCSSによるスムーズなスクロール

CSSのscroll-behaviorプロパティを使用すると、スクロールの動作を変更できます。

例

次の例は、CSSのscroll-behaviorプロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
html {
   line-height: 200px;
   margin: 30px;
   text-align: center;
   vertical-align: middle;
}
#parent {
   scroll-behavior: smooth;
   width: 250px;
   height: 200px;
   overflow-y: scroll
}
.pink {
   height: 200px;
   box-shadow: inset 0 0 50px deeppink;
}
.blue {
   height: 200px;
   box-shadow: inset 0 0 50px darkblue;
}
</style>
</head>
<body>
<div id="parent">
<div class="blue" id="first"><a href=#last>Last</a></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="pink" id="last"><a href=#first>First</a></div>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

純粋なCSSによるスムーズなスクロール

例

<!DOCTYPE html>
<html>
<head>
<style>
html {
   line-height: 150px;
   margin: 30px;
   text-align: center;
   vertical-align: middle;
}
#parent {
   scroll-behavior: auto;
   width: 150px;
   height: 150px;
   overflow: hidden;
   border: 22px groove tomato;
   border-radius: 50%;
}
.green {
   height: 150px;
   box-shadow: inset 0 0 50px darkgreen;
}
.blue {
   height: 150px;
   box-shadow: inset 0 0 50px darkblue;
}
</style>
</head>
<body>
<div id="parent">
<div class="blue" id="first"><a href=#last>Last</a></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green" id="last"><a href=#first>First</a></div>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

純粋なCSSによるスムーズなスクロール


  1. CSSでメニューアイコンを作成するにはどうすればよいですか？

    CSSでメニューアイコンを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div {    width: 40px;    height: 7px;    background-color: blue;    

  2. フレックスボックスを使用した高度なCSSレイアウト

    CSS3は、一般にFlexboxと呼ばれるレイアウトモードのFlexibleBoxを提供します。 Flexbox（フレキシブルボックス）はCSS3のレイアウトモードです。このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。コンテナ、フレックスアイテムなどが含まれます。コンテナには次のプロパティがあります- フレックス方向 フレックスラップ フレックスフロー justify-content 整列アイテム align-content 以下は、flexboxを使用した高度なCSSレイアウトのコードです- 例 &l