ScrollIntoView 在所有浏览器中都能工作吗？

scrollIntoView()能在所有浏览器中工作吗? 如果不能，是否有 jQuery的替代品？

81808 次浏览
小开

看起来是的: http://www.quirksmode.org/dom/w3c_cssom.html

小开
最佳答案

它是支持的，但用户体验是... 糟糕的。

正如@9bits 所指出的，这一直是 所有主要浏览器都支持。不用担心。主要问题在于它的工作方式。它只是跳转到一个特定的元素，这个元素也可以在页面的末尾。通过跳转到它，用户不知道是否:

  • 页面已经滚动了
  • 页面已向下滚动
  • 他们被转移到别处去了

前两个可以通过滚动位置来确定，但是谁说用户在跳转之前保持了滚动位置的跟踪？所以这是一个不确定的动作。

最后一个可能是正确的，特别是如果页面的 移动头滚出视图，剩下的页面设计并不意味着在同一个页面上(如果它也没有任何总高度垂直元素，如左侧菜单栏)。你会惊讶有多少页有这个问题。你自己看吧。转到某个页面，在顶部查看，然后按 End键再次查看。你可能会认为这是一个不同的页面。

动画 scrollintoview jQuery 插件拯救

这就是为什么仍然使用 执行滚动到视图的插件而不是使用本机 DOM 函数的原因。他们通常动画滚动，消除所有3个问题概述以上。用户可以很容易地跟踪运动。

小开

我使用 Matteo Spinnelli 的 第四卷，它也可以在 iOS 游猎中使用。它有三个方法 scrollTo、 scrollToElement 和 scrollToPage。假设您有一个包装在 div 中的无序元素列表。正如 RobertKoritnik 在上面所写的，您需要使用那个轻微的动画来显示您已经滚动了。下面的方法可以达到这种效果。

scrollToElement(element, time);
小开

还没有试过这个，但似乎搭载内置的 scrollIntoView 函数可以节省很多代码。如果你想要动画片，我会这么做:

  1. 将容器的当前滚动位置缓存为 START POSITION
  2. 在 scrollIntoView 中运行
  3. 再次将滚动位置缓存为 END 位置
  4. 将容器返回到开始位置
  5. 动画滚动到结束位置
小开

请阅读 scrollIntoViewIfNeeded

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
小开

您可以使用 jQuery 替代和动画化 <html>和 <body>元素:

$('html, body').animate({
scrollTop: $("#myElem").offset().top
}, 1000);
小开

CSS 解决了，伙计们! ！ 我用 # idSelected 选择了目标 id，并用 css 设置了它的样式为“滚动-边距-顶部”，并用 rems 定义了我的边距顶部(使用任何适合您的度量)。

#idSelected {
scroll-margin-top: 10rem;
}

提交答案