scrollIntoView卷轴太远了

我有一个页面，其中一个滚动条包含从数据库动态生成的带有div的表行。每个表行就像一个链接，有点像你在视频播放器旁边看到的YouTube播放列表。

当用户访问页面时，他们所在的选项应该会转到滚动div的顶部。这个功能正在工作。问题是，这有点太过分了。比如他们的选项高了10像素。因此，页面被访问，url被用来识别选择了哪个选项，然后将该选项滚动到滚动div的顶部。注意:这不是窗口的滚动条，这是一个带有滚动条的div。

我正在使用这段代码，使它移动选中的选项到div的顶部:

var pathArray = window.location.pathname.split( '/' );

var el = document.getElementById(pathArray[5]);

el.scrollIntoView(true);

它将它移动到div的顶部，但大约10个像素太高了。有人知道怎么解决吗?

当前回答

20秒内搞定:

这个解属于@ arsenie - ii，我只是把它简化成一个函数。

function _scrollTo(selector, yOffset = 0){
  const el = document.querySelector(selector);
  const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;

  window.scrollTo({top: y, behavior: 'smooth'});
}

使用方法(您可以在StackOverflow中打开控制台并进行测试):

_scrollTo('#question-header', 0);

我目前正在生产中使用它，它工作得很好。

2020-04-01 06:34:06

其他回答

如果它大约是10px，那么我猜你可以简单地手动调整包含div的滚动偏移量，就像这样:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;

2014-07-10 00:16:18

根据arsenie - ii的回答:我有一个用例，其中滚动实体不是窗口本身，而是一个内部模板(在这种情况下是div)。在这个场景中，我们需要为滚动容器设置一个ID，并通过getElementById获取它来使用它的滚动函数:

<div class="scroll-container" id="app-content">
  ...
</div>

const yOffsetForScroll = -100
const y = document.getElementById(this.idToScroll).getBoundingClientRect().top;
const main = document.getElementById('app-content');
main.scrollTo({
    top: y + main.scrollTop + yOffsetForScroll,
    behavior: 'smooth'
  });

把它留在这里，以防有人面临类似的情况!

2019-10-08 07:47:01

我的主要想法是在我们想要滚动到的视图上方创建一个tempDiv。它在我的项目中工作得很好，没有滞后。

scrollToView = (element, offset) => {
    var rect = element.getBoundingClientRect();
    var targetY = rect.y + window.scrollY - offset;

    var tempDiv;
    tempDiv = document.getElementById("tempDiv");
    if (tempDiv) {
        tempDiv.style.top = targetY + "px";
    } else {
        tempDiv = document.createElement('div');
        tempDiv.id = "tempDiv";
        tempDiv.style.background = "#F00";
        tempDiv.style.width = "10px";
        tempDiv.style.height = "10px";
        tempDiv.style.position = "absolute";
        tempDiv.style.top = targetY + "px";
        document.body.appendChild(tempDiv);
    }

    tempDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

示例使用

onContactUsClick = () => {
    this.scrollToView(document.getElementById("contact-us"), 48);
}

希望能有所帮助

2019-05-23 07:15:00

我用，

element.scrollIntoView({ behavior: 'smooth', block: 'center' });

这使得元素在滚动后出现在中心，所以我不需要计算yOffset。

希望能有所帮助……

2019-11-05 15:16:32