裏技も好きだけど、定番も大好きな下駄です。
今回は、webページでスクロール機能をつける時に、「scroll-behavior」プロパティを必ずセットしておいたほうがいいという話です。
scroll機能について
ここで言っている「scroll機能」ってスマホ画面が縦スクロールする機能だけではなく、「ページ内リンク」や、「最上部へ戻るボタン」などの機能を含めたすべての場合です。 デフォルト状態で、ページ内リンクをクリックすると、すぐにそのページのリンク先に移動しますが、その位置がページのどの位置なのかを把握するのが少し困難な場合が、たまにあります。 こうした時に「scroll-behavior」プロパティをセットしておけば、なめらかにスクロールして、上下左右どの方向にスクロールしたのかが視覚的に分かって、場所のポジショニングが明確になります。 もちろん、こうしたスクロールを一瞬で切り替えることで、ページ位置などは理解しなくてもよく、まるでURLが切り替わったページ遷移を演出する場合などは、デフォルト状態でも問題ないでしょう。 でも、個人的な経験として、基本的にこのプロパティをセットしておくことで、自作の簡易カルーセル処理などにも使えるので、覚えておいて損はない機能です。scroll-behaviorについて
このプロパティは、基本的に２つの値だけ覚えておけばいいので非常に覚えやすいです。 瞬時にスクロールする「auto」と、なめらかにスクロールする「smooth」です。 非常に簡単なので、サンプルソースを見てもらいましょう。<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>scroll-behavior</title>
<style type="text/css">
a{
text-decoration: none;
}
.scroll{
width:100px;
height:100px;
border:1px solid black;
overflow-y:scroll;
line-height:100px;
text-align:center;
}
.scroll > *{
width:100%;
height:100px;
font-size:30px;
}
.scroll[type="auto"]{
scroll-behavior:auto;
}
.scroll[type="smooth"]{
scroll-behavior:smooth;
}
</style>
</head>
<body>
<p>scroll-vihavior:auto;</p>
<nav>
<a href="#scroll-auto-1">1</a>
<a href="#scroll-auto-2">2</a>
<a href="#scroll-auto-3">3</a>
</nav>
<div class="scroll" type="auto">
<div id="scroll-auto-1">1</div>
<div id="scroll-auto-2">2</div>
<div id="scroll-auto-3">3</div>
</div>
<p>scroll-vihavior:smooth;</p>
<nav>
<a href="#scroll-smooth-1">1</a>
<a href="#scroll-smooth-2">2</a>
<a href="#scroll-smooth-3">3</a>
</nav>
<div class="scroll" type="smooth">
<div id="scroll-smooth-1">1</div>
<div id="scroll-smooth-2">2</div>
<div id="scroll-smooth-3">3</div>
</div>
</body>
</html>
autoとsmoothのそれぞれの1,2,3リンクをクリックすると、挙動が確認できます。
See the Pen scroll-smooth by YugetaKoji (@geta1972) on CodePen.
