ScrollIntoView 元素上方 20 像素？答案

【问题标题】：ScrollIntoView 20px above element?ScrollIntoView 元素上方 20 像素？
【发布时间】：2021-03-28 08:44:33
【问题描述】：

假设我有以下功能：

window.smoothScroll = function(target) {
  var scrollContainer = target;
  scrollContainer.scrollIntoView(true);
}

如何让页面在元素上方滚动 20 像素，而不是滚动到元素本身？

谢谢

【问题讨论】：

标签： javascript scroll

【解决方案1】：

获取元素的维度信息，然后告诉窗口滚动到元素的 top 负 20，而不是将其滚动到视图中：

function scrollToJustAbove(element, margin=20) {
  let dims = element.getBoundingClientRect();
  window.scrollTo(window.scrollX, dims.top - margin);
}

【讨论】：

谢谢，这似乎有效。但我没有使用 getBoundingClientRect() ，而是使用了 .offsetTop ，它似乎工作正常。
它只是似乎可以正常工作，但 offsetX/Y 属性是相对值，相对于父级边界测量。如果您的意图是基于元素实际位置的可靠滚动，则不要进行该更改，并坚持使用getBoundingClientRect =)
stackoverflow.com/questions/49820013/… 上有一个更完整的答案/演示。

【解决方案2】：

好吧，为了平滑滚动，您可以使用 jQuery animate()。检查下面的代码：

window.smoothScroll = function(target, above, speed) {
  let $scrollContainer = $target;
  jQuery('html, body').animate({
    scrollTop: jQuery(scrollContainer).offset().top - above
  }, speed);
}

[注意：above 将是您的 20（因为您希望在目标上方 20px），speed 将是任何数字，例如：900 这样的数字。]

如果有帮助的话……！

【讨论】：

【解决方案3】：

请更改变量定义。 $scrollContainer 和目标变量不一样，你可以在下面使用

window.smoothScroll = function(target, above, speed) {
    let scrollContainer = target;
    $('html, body').animate({
        scrollTop: jQuery(scrollContainer).offset().top - above
    }, speed);}

【讨论】：