<h2 style="text-align: start" id="h9707d3a59a"><strong>概要</strong></h2><p style="text-align: start">スムーズなページ内遷移を実現するために、scroll-behavior: smooth;を使うことがあるかと思います。しかし、SPA（Single Page Application）では、このプロパティが遷移時に意図しない動作を引き起こすことがあります。</p><p style="text-align: start">本記事では、SPAでscroll-behavior: smooth;が影響する問題を解決する方法について説明します。</p><h2 style="text-align: start" id="h97b759db3e"><strong>実現したい挙動</strong></h2><p style="text-align: start">ページ内遷移では連続的にスムーズに移動し、ページ間の遷移はパッと一番上に切り替わる。</p><h2 style="text-align: start" id="h5c0c7cb22e"><strong>問題</strong></h2><p style="text-align: start">まず、SPAでscroll-behavior: smooth;がどのような影響を与えるかを説明します。</p><p style="text-align: start">SPAで何も指定せずにvue routerの設定をすると、前のページのスクロール量が残ってしまいます。下記の画像のようなイメージです。</p><p style="text-align: start"></p><p style="text-align: start">本来は下記のようなイメージで遷移したいですよね</p><p style="text-align: start"></p><p style="text-align: start">二つ目のイメージのように遷移するたびに一番上へ遷移するような設定をした際、下記のようにscroll-behavior: smooth;を指定していると二ページに遷移するときパッと切り替わって欲しいのにスムーズなスクロールが入ってしまいます。</p><p>.css</p><pre><code>html {
  scroll-behavior: smooth;
}
</code></pre><p style="text-align: start">一番上へ遷移するような設定に関しては下記を参考にさせていただきました。</p><p style="text-align: start"></p><h2 style="text-align: start" id="h79a0d99e74"><strong>解決策の提案</strong></h2><p style="text-align: start"><strong>①aタグでページ内遷移を行う<br>②JavaScriptを使用してスクロール制御を行う</strong></p><h3 style="text-align: start" id="h47ff75112f"><strong>①aタグでページ内遷移を行う</strong></h3><p style="text-align: start">そもそもaタグでページ内遷移を行う時の為にscroll-behavior: smooth;を指定するわけですが、その解決法を提案します。</p><ul><li>aタグを押した瞬間だけCSSにscroll-behavior: smooth;を指定する</li><li>setTimeout等でscroll-behavior: auto;に戻す</li></ul><p>A-tag.vue</p><pre><code>&lt;script setup lang=&quot;ts&quot;&gt;
const smoothScroll = () =&gt; {
  document.documentElement.style.scrollBehavior = &apos;smooth&apos;;
  setTimeout(() =&gt; {
    document.documentElement.style.scrollBehavior = &apos;auto&apos;;
  }, 100);
}
&lt;/script&gt;

&lt;template&gt;
  &lt;a @click=&quot;smoothScroll&quot; href=&quot;#anchor&quot;&gt;↓ aタグです　&lt;/a&gt;

  &lt;div id=&quot;anchor&quot; class=&quot;page page4&quot;&gt;
      &lt;p&gt;4&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre><h3 style="text-align: start" id="h472563f97c"><strong>②JavaScriptを使用してスクロール制御を行う</strong></h3><p style="text-align: start">aタグでidで指定した要素にページ内遷移する方法ではなく、JavaScriptでwindow.scrollToを使用してページ遷移を行う方法を使用する方法です。</p><p style="text-align: start"></p><p>JS.vue</p><pre><code>&lt;script setup lang=&quot;ts&quot;&gt;
import { onMounted, ref } from &apos;vue&apos;;

const anchor = ref&lt;HTMLElement | null&gt;(null);

onMounted(() =&gt; {
  anchor.value = document.querySelector(&apos;#anchor&apos;);
});

const smoothScroll = () =&gt; {
  const element = anchor.value;
  if (element) {
    window.scrollTo({
      top: element.offsetTop,
      behavior: &apos;smooth&apos;
    });
  }
}
&lt;/script&gt;

&lt;template&gt;
  &lt;button @click=&quot;smoothScroll&quot;&gt;↓ Clickイベントです　&lt;/button&gt;

  &lt;div id=&quot;anchor&quot; class=&quot;page page4&quot;&gt;
      &lt;p&gt;4&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre><p style="text-align: start">scroll-behavior: smooth;の代わりにJavaScriptを使用して、ページ遷移時のスムーズスクロールを制御します。</p><h2 style="text-align: start" id="hab1336c444"><strong>実際に実装してみた</strong></h2><p style="text-align: start"></p><p style="text-align: start">実際に両方見てみても挙動に差は見られません。</p><p style="text-align: start">開発者ツールでソースを確認すると、aタグで遷移する方のページではaタグを押した際に<code>&lt;html&gt;</code>タグでstyleの変更が行われているのが見えると思います。</p><h2 style="text-align: start" id="h27b77fd3dd"><strong>どちらを使うのがいいの？</strong></h2><p style="text-align: start">私個人の感想になりますが、②のJavaScriptを使用してスクロール制御を行う方が違和感がないかなという気がしています。クラスの付け替えを頻繁に行うのはそういう動きが必要でない場合には気持ち悪い感じがしますが、プロジェクトに合わせて選んでいただければと思います。私は今後②の方法を主に使用していくと思います。</p><h2 style="text-align: start" id="h3bcda3e6b0"><strong>最後に</strong></h2><p style="text-align: start">今回の問題以外にもSPAならではの問題が多々あるので都度ベストプラクティスを求めて解決していきたいです。SPAでaタグを使用すると他にも弊害が起きていたので、現象の再現と解決策が見つかりましたらまた書きたいと思います。</p><p style="text-align: start">最後までありがとうございました。</p><p style="text-align: start"></p>

SPAの遷移にページ内遷移の為のscroll-behavior: smooth;が影響してしまう際の解決法

<h2 style="text-align: start" id="h8d027c8ed3"><strong>はじめに</strong></h2><p style="text-align: start">現在displayの2値構文は下記のカードを踏んでいただくと分かる通りSafariとFirefoxのみでしたがChromeのv115でサポートされるようになるということですので振り返っていこうと思います。</p><h5 style="text-align: start" id="h15767abda8"><strong>↓displayの2値構文のブラウザの対応状況</strong></h5><p style="text-align: start"></p><h5 style="text-align: start" id="h4d51941935"><strong>↓Chrome115に関する情報</strong></h5><p style="text-align: start"></p><h2 style="text-align: start" id="h332e2529a0"><strong>まず、displayの2値構文とは何？</strong></h2><p style="text-align: start">現在CSSで使用されるdisplayには大きく分けて、要素の種類を分けるものとレイアウトに関するものの二つがあると思っています。要素の種類というのがblock要素,inline要素であり、レイアウトに関するものがflexやgridなどになります。現在は一つの値でまかなっているものを二つの値に分けてわかりやすく書こうというのがdisplayの2値構文です。下記は同じ意味です。</p><p><strong>!    </strong>厳密には外側の箱（その要素）としての振る舞いと内側の子要素の振る舞いを設定するということになります。</p><pre><code class="language-css">.block {
    display: block;
}

.block {
    display: block flow;
}
</code></pre><h2 style="text-align: start" id="hf9b0813938"><strong>2値構文の一覧</strong></h2><p style="text-align: start">外（その要素自体）の初期値は <strong>&quot;block&quot;</strong> ,内（子）の初期値は <strong>&quot;flow&quot;</strong> になります。<br>(初期値という表現はあまり正しくないので下記の表を見て特に言及されていない時と考えていただければと思います。)</p><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>＼</strong></p></th><th colspan="1" rowspan="1"><p><strong>一つのプロパティ</strong></p></th><th colspan="1" rowspan="1"><p><strong>二つのプロパティ(2値構文)</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p>例</p></td><td colspan="1" rowspan="1"><p><strong>display:　&quot;値&quot;;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　&quot;外&quot;　&quot;内&quot;;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　block;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　block flow;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline flow;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　flow-root;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　block flow-root;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　flex;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　block flex;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline-flex;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline flex;</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline-block;</strong></p></td><td colspan="1" rowspan="1"><p><strong>display:　inline flow-root;</strong></p></td></tr></tbody></table><h2 style="text-align: start" id="h08ed7f0b64"><strong>上の表の補足（flexを指定するとblockになる）</strong></h2><p style="text-align: start">spanタグで横並びになっているものをflexを付与した時の動きになります。<br>ボタンを押して確かめていただければと思います。</p><h2 style="text-align: start" id="h351e81ab8c"><strong>displayの2値構文のメリットとデメリット</strong></h2><h3 style="text-align: start" id="h7dcf5154f0"><strong>● メリット</strong></h3><p style="text-align: start">・ コードを見た時にわかりやすい<br>ー外(それ自体)の要素がどのようになっていて、内(子)の要素がどうなっているかが分かりやすいのでレイアウトの崩れなどに気付きやすくなり対応しやすい。</p><h3 style="text-align: start" id="h7693ed040d"><strong>● デメリット</strong></h3><p style="text-align: start">・ わざわざ2つ書くメリットがあまり見つけられない。<br>ーこの記事自体が本末転倒なのですが、正直感覚的に理解しているのでわざわざ書かなくてもいいと個人的には思ってしまっています。ただこの内と外の2つを元に構成されていると理解することには意味があるのかなと思っています。</p><h2 style="text-align: start" id="ha214098e44"><strong>まとめ</strong></h2><p style="text-align: start">今回displayの2値構文がサポートされるということで再度まとめてみたのですが、中々メリットを見つけてあげられませんでした。こういうメリットがあるよ！筆者何もわかってないな…という方はぜひコメントなどで教えていただけますと、とても嬉しいです。</p><p style="text-align: start">displayの話で出てきた要素の内や外がよくわからなかったという方は<a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_display" target="_blank" rel="noopener noreferrer nofollow">こちら</a>のdisplayプロパティに関するMDNの中で詳しく解説されていますので、MDNはのぞいてみると知らないことがあって意外と楽しいので良いと思います。</p><p style="text-align: start">それでは読んでいただいてありがとうございました。失礼しますm(_ _)m</p>

SPAの遷移にページ内遷移の為のscroll-behavior: smooth;が影響してしまう際の解決法

23/07にdisplayの2値構文がChromeでサポートされるらしいので振り返ろう