scroll-margin-top: 70px; これで解決できます。 scroll into view fixed headerでググりました。 https://www.bram.us/2020/03/01/prevent-content-from-being-hidden-underneath-a-fixed-header-by-using-scroll-margin-top/ https://stackoverflow.com/questions/13614112/using-scrollintoview-with-a-fixed-position-header と思いきや、2021年9月現在Safariで動作しないので、以下の記事のように力技で対応する必要がある。辛い。 https://zenn.dev/catnose99/articles/75d3c69bf71bad
ざっと以下のようなコンポーネントを実装するといい。 import { css } from 'linaria'; import { ReactNode } from 'react'; type Props = { children: ReactNode; }; const style = css` display: flex; padding: 4px 0; margin-left: 8px; position: relative; white-space: nowrap; z-index: 1; &:after { content: ''; position: absolute; top: 12px; left: -6px; width: calc(100% + 6px); height: 12px; background: #fdfdfd; transform: skewX(-20deg); z-index: -1; } `; export const Underlined = ({ children }: Props) => { return <span className={style}>{children}</span>; }; ポイント skew transform: skewX(-20deg); これで右方向に少し歪んだ図形が作れる。...
背景 overscroll-behavior-x https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-x X軸方向にスクロールしたとき、要素の両端に到達したときブラウザ標準の挙動を引き起こさないために指定する
ease-in-outみたいなデフォルトの動きでは満足しなくなってきたときに使える。 animation-timing-function: cubic-bezier(0.71, 0.35, 1, -0.6); こちらのサイトでシミュレーションできる https://cubic-bezier.com/#.17,.67,.83,.67