スムーススクロール対応 - Githubissues

yamosan / geikoten2021

https://geikousai-ncu.com/2021/

1 stars 0 forks source link

スムーススクロール対応 #8

Open yamosan opened 3 years ago

yamosan commented 3 years ago

調査

API window.scrollTo({behavior: "smooth"}) はポリフィルなしでOK element.scrollIntoView({behavior: "smooth"}) はポリフィルが必要
scroll-behavior-polyfill https://github.com/wessberg/scroll-behavior-polyfill どの設定方法でもscroll-behavior自体が有効になってしまう。

問題

SmoothScroll コンポーネントで、ページ内遷移の時のみscroll-behaviorを外すようにしている。 PCでは上手く動作するが、SPだとなぜか動作せず、遷移後にアニメーションが残り続けてしまう。

現状

以下のようにして対策

PC
- ページ内遷移はON
- 通常遷移はOFF(SmoothScrollコンポーネント)
SP
- ページ内遷移、通常遷移ともにOFF

SPにおいて、/#about にある「企画を見るボタン」がスムーススクロールしない