我有一个页面,其中一个滚动条包含从数据库动态生成的带有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);

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

其他回答

一种解决方案是创建一个相对于目标具有偏移量的不可见临时元素,滚动到它,然后删除它。这也许不是最理想的,但在我工作的环境中,其他解决方案对我不起作用。例如:

const createOffsetElement = (element) => {
    const offsetElement = document.createElement('div');
    offsetElement.style = `
        position: relative;
        top: -10em;
        height: 1px;
        width: 1px;
        visibility: hidden;
    `;
    const inputWrapper = element.closest('.ancestor-element-class');
    inputWrapper.appendChild(offsetElement);
    return offsetElement;
};

const scrollTo = (element) => {
    const offsetElement = createOffsetElement(element);
    offsetElement.scrollIntoView({
        behavior: 'smooth',
    });
    offsetElement.remove();
};

把我的解决方案留在这里,以防有人想达到和我一样的目标。

在我的例子中,错误或通知出现在提交后的页面顶部。(游戏邦注:对于几页滚动来说,页面有点长,在手机上则更长。)

我使用下面的代码片段将错误或通知滚动到视图中。

requestAnimationFrame (() = > errorOrNotification.scrollIntoView ({ Block: 'end', behavior: 'smooth' }) );

Block: 'end'是窍门。根据文档::它反映了alignToTop: false场景。为了融合平滑滚动,我添加了相同的替换。

从本质上讲,它将尝试将元素的底部与可滚动祖先(在我的例子中是窗口)的可见区域的底部对齐。

你也可以使用element.scrollIntoView()选项

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

大多数浏览器都支持

假设你想滚动到DOM中相同级别的div,并且类名为“scroll-with-offset”,那么这个CSS将解决这个问题:

.scroll-with-offset {    
  padding-top: 100px;
  margin-bottom: -100px;
}

与页面顶部的偏移量为100px。它只会像block: 'start'那样工作:

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

所发生的事情是div的顶部在正常位置,但它们的内部内容开始低于正常位置100px。这就是padding-top:100px的作用。margin-bottom: -100px用来抵消下面div的额外边距。 为了使解决方案完整,还添加了这个CSS来抵消最顶部和最底部div的边距/填充:

.top-div {
  padding-top: 0;
}
.bottom-div {
  margin-bottom: 0;
}

CSS滚动边距和滚动填充

你可能想看看新的CSS属性滚动填充和滚动边距。可以对滚动容器(在本例中为html)使用滚动填充,对容器内的元素使用滚动边距。

在你的例子中,你想为你想要滚动到视图中的元素添加scroll-margin-top,如下所示:

.example {
  scroll-margin-top: 10px;
}

这会影响scrollIntoView代码,如下所示:

const el = document.querySelector(".example");
el.scrollIntoView({block: "start", behavior: "smooth"});

这将导致视口滚动以使视口的上边界与元素的上边界对齐,但有10px的额外空间。换句话说,元素的这些属性被考虑在内:

padding-top border-top scroll-margin-top (而不是margin-top)

此外,如果html元素有滚动填充顶部设置,那么也会考虑这一点。