scrollIntoView滚动太远了

Question

我有一个页面,其中包含其中包含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个像素太远了.有谁知道如何解决这个问题？

Answer 1

您可以分两步完成:

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

Answer 2

我通过使用解决了这个问题，

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

这使得元素出现在center滚动后，所以我不必计算yOffset.

希望能帮助到你...

Answer 3

绝对方法定位锚点

另一种方法是将您的锚点准确定位在页面上您想要的位置,而不是依赖于按偏移量滚动.我发现它允许更好地控制每个元素(例如,如果你想要某些元素的不同偏移量),并且可能更能抵抗浏览器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.

Answer 4

平滑滚动到正确的位置

获取正确的 y坐标并使用window.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'});

Answer 5

如果它大约10px,那么我想你可以简单地手动调整包含div的滚动偏移量:

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

Answer 6

在 20 秒内修复它：

该解决方案属于@Arseniy-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);

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

Answer 7

最简单的方法是，

html, body {
    scroll-behavior: smooth;
}

    html [id], body [id] {
        scroll-margin: 50px !important;
    }

用您提供的代码

var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.style.scrollMargin = '50px';
el.scrollIntoView(true);

Answer 8

这对我在Chrome中有效（滚动流畅且无计时漏洞）

它只是移动元素，启动滚动，然后将其移回。

如果元素已经在屏幕上，则没有可见的“弹出”。

pos = targetEle.style.position;
top = targetEle.style.top;
targetEle.style.position = 'relative';
targetEle.style.top = '-20px';
targetEle.scrollIntoView({behavior: 'smooth', block: 'start');
targetEle.style.top = top;
targetEle.style.position = pos;

Answer 9

您也可以使用这些element.scrollIntoView() 选项

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

大多数浏览器都支持

Answer 10

基于先前的答案，我正在Angular5项目中进行此操作。

开始于：

// el.scrollIntoView(true);
el.scrollIntoView({
   behavior: 'smooth',
   block: 'start'
});
window.scrollBy(0, -10); 

但这带来了一些问题，需要为scrollBy（）设置setTimeout，如下所示：

//window.scrollBy(0,-10);
setTimeout(() => {
  window.scrollBy(0,-10)
  }, 500);

它在MSIE11和Chrome 68+中完美运行。我没有在FF中测试过。500ms是我冒险的最短延迟。降低滚动有时会失败，因为平滑滚动尚未完成。根据您自己的项目进行调整。

对于这个简单但有效的解决方案，请向Fred727 +1 。

Answer 11

假设您要滚动到DOM中所有处于相同级别并且具有类名“ scroll-with-offset”的div，那么此CSS将解决此问题：

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

与页面顶部的偏移量为100px。它将仅按预期与块：“开始”一起工作：

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

Answer 12

我已经得到了这个，它对我来说非常有效：

// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start'});

setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}

希望能帮助到你。

Answer 13

另一种解决方案是使用“offsetTop”，如下所示：

var elementPosition = document.getElementById('id').offsetTop;

window.scrollTo({
  top: elementPosition - 10, //add your necessary value
  behavior: "smooth"  //Smooth transition to roll
});

Answer 14

CSSscroll-margin和scroll-padding

您可能想看看新的 CSS 属性scroll-padding和scroll-margin. 您可以scroll-padding用于滚动容器（html在本例中）和scroll-margin容器内的元素。

对于您的示例，您需要为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元素已scroll-padding-top设置，则也将其考虑在内。