滚动到查看滚动太远平滑滚动到正确的位置（已过时）通过绝对方法定位锚点

javascript dom scroll

2022-08-30 01:18:56

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

当用户访问该页面时，他们所在的选项应该转到滚动div的顶部。此功能正在运行。问题是它走得有点太远了。就像他们所在的选项大约10px太高一样。因此，访问该页面，url 用于标识选择了哪个选项，然后将该选项滚动到滚动 div 的顶部。注意：这不是窗口的滚动条，而是带有滚动条的 div。

我正在使用此代码使其将所选选项移动到div的顶部：

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

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

el.scrollIntoView(true);

它将其移动到 div 的顶部，但向上移动了大约 10 个像素。有人知道如何解决这个问题吗？

答案 1

平滑滚动到正确的位置（已过时）

有更好的答案，它使用滚动边距和滚动填充css规则。在此解决方案中，会触发其他强制布局，并可能导致不必要的性能问题。getBoundingClientRect

获取正确的坐标和使用ywindow.scrollTo({top: y, behavior: 'smooth'})

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

答案 2

通过绝对方法定位锚点

另一种方法是将锚点精确地定位在页面上所需的位置，而不是依靠偏移量滚动。我发现它允许更好地控制每个元素（例如，如果你想要某些元素的不同偏移量），并且可能更能抵抗浏览器API更改/差异。

<div id="title-element" style="position: relative;">
  <div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>

现在，相对于元素，偏移量被指定为 -100px。创建一个函数来创建此定位点以供代码重用，或者如果您使用的是现代JS框架（如React），则可以通过创建一个呈现锚点的组件来执行此操作，并为每个元素传入锚点名称和对齐方式，这可能相同，也可能不相同。

然后只需使用：

const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });

用于偏移量为 100px 的平滑滚动。