scrollIntoView 是否适用于所有浏览器？答案

【问题标题】：Does scrollIntoView work in all browsers?scrollIntoView 是否适用于所有浏览器？
【发布时间】：2012-03-15 19:03:22
【问题描述】：

scrollIntoView() 是否适用于所有浏览器？如果没有，是否有 jQuery 替代方案？

【问题讨论】：

标签： javascript jquery js-scrollintoview

【解决方案1】：

看起来确实如此：http://www.quirksmode.org/dom/w3c_cssom.html

【讨论】：

【解决方案2】：

支持，是的，但是用户体验……不好。

正如@9bits 所指出的，这早已是supported by all major browsers。不用担心。主要问题是它的工作方式。它只是跳转到可能位于页面末尾的特定元素。通过跳转到它，用户不知道是否：

页面已向上滚动
页面已向下滚动
他们已被重定向到其他地方

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

最后一个可能是真的，特别是如果页面的 moving 标题被滚动到视图之外并且剩余的页面设计并不意味着在同一页面上的任何内容（如果它也没有） t 有任何总高度垂直元素，如左菜单栏）。你会惊讶有多少页面有这个问题。自己检查一下。转到某个页面，在顶部查看它，然后按 End 键并再次查看它。您可能会认为这是一个不同的页面。

动画`scrollintoview` jQuery 插件救援

这就是为什么仍然有plugins that perform scroll into view 而不是使用原生 DOM 函数的原因。他们通常会为滚动设置动画，从而消除上述所有 3 个问题。用户可以轻松跟踪移动。

【讨论】：

注意：如果滚动元素在 iframe 中（原因很明显），jQuery 插件不起作用（右）。 element.scrollIntoView 即使在那时也可以工作。
带有ScrollIntoViewOptions 的新规范允许指定behavior: 'smooth'。不幸的是，无法轻松检测浏览器是否支持此选项……
Firefox 似乎支持behavior: "smooth"，但不支持 Chrome 或 Safari。
这对于创建自定义下拉菜单非常有用，其中箭头键控制向上/向下，并根据所选项目滚动菜单。在这种情况下，如果不让它在项目之间立即跳转，那将是一种糟糕的用户体验。
@Flimm 既不在 IE/Edge 中。 See reference，只有FF36+才有这个功能。因此，不幸的是，它没用。

【解决方案3】：

我使用 Matteo Spinnelli 的 iScroll-4，它也适用于 iOS safari。它具有三个方法scrollTo、scrollToElement 和scrollToPage。假设您有一个包含在 div 中的元素的无序列表。正如 Robert Koritnik 上面所写的，你需要有轻微的动画来显示你已经滚动了。下面的方法达到了这个效果。

scrollToElement(element, time);

【讨论】：

您与 iScroll-4 的链接已失效

【解决方案4】：

没有尝试过，但似乎搭载内置的 scrollIntoView 函数会节省很多代码。如果你想要动画动作，我会这样做：

将容器的当前滚动位置缓存为 START POSITION
运行内置 scrollIntoView
再次将滚动位置缓存为 END POSITION
将容器返回到开始位置
动画滚动到结束位置

【讨论】：

【解决方案5】：

请阅读 scrollIntoViewIfNeeded

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

支持，是的，但是用户体验……不好。

动画scrollintoview jQuery 插件救援

动画`scrollintoview` jQuery 插件救援