我有一个页面,其中一个滚动条包含从数据库动态生成的带有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个像素太高了。 有人知道怎么解决吗?


当前回答

你可以分两步完成:

el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here

其他回答

我添加这些css技巧给那些没有解决这个问题的解决方案:

#myDiv::before {
  display: block;
  content: " ";
  margin-top: -90px; // adjust this with your header height
  height: 90px; // adjust this with your header height
  visibility: hidden;
}

也许这有点笨拙,但到目前为止还不错。我在angular 9工作。

文件.ts

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

. html文件

<button (click)="scroll(target)"></button>
<div  #target style="margin-top:-50px;padding-top: 50px;" ></div>

我用边距和填充顶部调整偏移量。

问候!

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

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

平滑滚动到适当的位置

这是大多数情况下更好的答案。它使用滚动边距和滚动填充CSS规则。 下面的解决方案使用getBoundingClientRect,它会触发一个额外的强制布局。

得到正确的y坐标并使用window。scrollTo({top: y,行为:'平滑'})

const id = 'profilePhoto';
const yOffset = -10; 
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

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

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元素有滚动填充顶部设置,那么也会考虑这一点。