83

是否scrollIntoView()适用于所有浏览器？如果没有，还有jQuery其他选择吗？

4

6 回答 6

82

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

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

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

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

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

scrollintoview用于救援的动画jQuery 插件

这就是为什么仍然有插件执行滚动到视图而不是使用本机 DOM 功能的原因。他们通常会为滚动设置动画，从而消除上述所有 3 个问题。用户可以轻松跟踪运动。

于 2012-02-25T16:55:16.963 回答
13

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

于 2012-02-25T16:40:27.530 回答
3

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

scrollToElement(element, time);
于 2012-11-18T09:13:23.697 回答
3

请阅读有关 scrollIntoViewIfNeeded 的信息

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
于 2017-02-02T08:12:30.857 回答
2

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

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
于 2018-06-20T13:07:19.257 回答
1

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

  1. 将容器的当前滚动位置缓存为 START POSITION
  2. 运行内置 scrollIntoView
  3. 再次将滚动位置缓存为 END POSITION
  4. 将容器返回到开始位置
  5. 动画滚动到 END POSITION
于 2014-11-25T05:09:31.543 回答