JavaScript scrollIntoView平滑滚动和偏移 [英] JavaScript scrollIntoView smooth scroll and offset

问题描述

我在我的网站上有以下代码:

I have this code for my website:

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

这很好用，但我有一个固定的标头，因此当代码滚动到该元素时，标头便会出现.

This works pretty nice but I have a fixed header so when the code scrolls to the element the header is in the way.

有没有一种方法可以使偏移量平滑地滚动?

Is there a way to have an offset and make it scroll smoothly?

推荐答案

有没有一种方法可以使偏移量平滑地滚动?

Is there a way to have an offset and make it scroll smoothly?

是，但不可以使用scrollIntoView()

元素的 scrollIntoViewOptions .scrollIntoView()不能不允许使用偏移量.当您要滚动到元素的精确位置时，此功能非常有用.

Yes, but not with scrollIntoView()

The scrollIntoViewOptions of Element.scrollIntoView() do not allow you to use an offset. It is solely useful when you want to scroll to the exact position of the element.

不过，您可以使用 Window.scrollTo()，并提供滚动到偏移位置和平滑的位置的选项.

You can however use Window.scrollTo() with options to both scroll to an offset position and to do so smoothly.

例如，如果标题的高度为 30px ，则可以执行以下操作:

If you have a header with a height of 30px for example you might do the following:

function scrollToTargetAdjusted(){
    var element = document.getElementById('targetElement');
    var headerOffset = 45;
    var elementPosition = element.getBoundingClientRect().top;
    var offsetPosition = elementPosition - headerOffset;

    window.scrollTo({
         top: offsetPosition,
         behavior: "smooth"
    });
}

这将平滑滚动到您的元素，以防止您的标头阻止该元素的显示.

This will smoothly scroll to your element just so that it is not blocked from view by your header.

注意:之所以减去此偏移量是因为您想在将标题滚动到元素上之前先停下来.

Note: You substract the offset because you want to stop before you scroll your header over your element.

您可以在下面的代码段中比较这两个选项.

You can compare both options in the snippet below.

<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 - 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>

这篇关于JavaScript scrollIntoView平滑滚动和偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！