javascript - JavaScript scrollIntoView スムーズ スクロールとオフセット

Question

私は自分のウェブサイトにこのコードを持っています：

function clickMe() {
  var element = document.getElementById('about');
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
  });
}

これはかなりうまく機能しますが、ヘッダーが固定されているため、コードが要素にスクロールするときにヘッダーが邪魔になります。

オフセットを設定してスムーズにスクロールさせる方法はありますか?

Answer 1

これはハックであり、間違いなく注意して使用する必要があることはわかっていますが、実際には要素に apaddingと否定marginを追加できます。私はあなたのマークアップとコードを持っていないので、それがうまくいくとは保証できませんが、同様の問題があり、この回避策を使用して解決しました.

ヘッダーが30pxで、オフセットが必要だとすると、次のようになります15px。

  #about {
     padding-top: 45px; // this will allow you to scroll 15px below your 30px header
     margin-top: -45px; // and this will make sure that you don't change your layout because of it
  }

Answer 2

scrollIntoView()例のように使用できます

function clickMe() {
  var element = document.getElementById('about');
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
  });
}

scroll-marginヘッダーの高さをターゲット要素に追加する場合( about):

.about {
  scroll-margin: 100px;
}

他に何も必要ありません。scroll-margin最新のすべてのブラウザでサポートされています。