BinaryDevelop
  1. ホーム
  2. javascript

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

2023-09-28 16:27:33

質問

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

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

これはかなりいい感じに動作しますが、固定ヘッダーがあるので、コードが要素にスクロールするとき、ヘッダーが邪魔になります。

オフセットを持たせて、スムーズにスクロールさせる方法はありますか？

どのように解決するのですか？

オフセットを持たせて、スムーズにスクロールさせる方法はありますか？

#はい、しかしscrollIntoView()ではできません。

その scrollIntoViewOptions の Element.scrollIntoView() する ではない では、オフセットを使用することができます。にスクロールしたい場合にのみ有効です。 正確な の位置にスクロールしたい場合にのみ有効です。

ただし Window.scrollTo() にスクロールするオプションがあります。 オフセット の位置と、そうするために スムーズに .

もし、ヘッダーの高さが 30px のようなヘッダーがある場合、次のようにします。 

function scrollToTargetAdjusted(){
    var element = document.getElementById('targetElement');
    var headerOffset = 45;
    var elementPosition = element.getBoundingClientRect().top;
    var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
  
    window.scrollTo({
         top: offsetPosition,
         behavior: "smooth"
    });
}

これは、ヘッダーによって視界から遮られないように、要素までスムーズにスクロールします。

注意 : ヘッダーを要素上にスクロールする前に停止したいので、オフセットを減算しています。

#実際に見てみる

以下のスニペットで、両方のオプションを比較することができます。 

<script type="text/javascript">
  function scrollToTarget() {

    var element = document.getElementById('targetElement');
    element.scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  }

  function scrollToTargetAdjusted() {
        var element = document.getElementById('targetElement');
      var headerOffset = 45;
        var elementPosition = element.getBoundingClientRect().top;
      var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
      
      window.scrollTo({
          top: offsetPosition,
          behavior: "smooth"
      });   
  }

  function backToTop() {
    window.scrollTo(0, 0);
  }
</script>

<div id="header" style="height:30px; width:100%; position:fixed; background-color:lightblue; text-align:center;"> <b>Fixed Header</b></div>

<div id="mainContent" style="padding:30px 0px;">

  <button type="button" onclick="scrollToTarget();">element.scrollIntoView() smooth, header blocks view</button>
  <button type="button" onclick="scrollToTargetAdjusted();">window.scrollTo() smooth, with offset</button>

  <div style="height:1000px;"></div>
  <div id="targetElement" style="background-color:red;">Target</div>
  <br/>
  <button type="button" onclick="backToTop();">Back to top</button>
  <div style="height:1000px;"></div>
</div>

編集

window.pageYOffset が追加され、@coreyward のコメントに関連する問題が修正されました。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します