Miobiki

  1. HOME
  2. javascript
  3. chromeでelement.scrollIntoView({ behavior: 'smooth' })が行き過ぎてしまう

chromeでelement.scrollIntoView({ behavior: 'smooth' })が行き過ぎてしまう

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView#パラメータ scrollIntoViewOptionsのデフォルトblockプロパティがstartではなく、centerでした。

そのため、以下のように変更 document.querySelector('#main').scrollIntoView({ behavior: 'smooth' })

document.querySelector('#main').scrollIntoView({ behavior: 'smooth', block: 'start' })
これで要素のはじまりに止まってくれるようになりました。

safariなどに対応させるためsmooth scroll behavior polyfillを使ってみていて、
chrome以外は期待通りの動きでした。そのためchromeがおかしいと思っていました。
このpolyfillは {block: 'end'} などは対応していないため、万能ではないようです。