scrollIntoView适用于所有浏览器吗?

时间:2012-02-25 16:37:57

标签: javascript jquery js-scrollintoview

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

6 个答案:

答案 0 :(得分:80)

支持是的,但用户体验很糟糕。

@ 9bits指出,这一直是supported by all major browsers。不用担心。主要问题是它的工作方式。它只是跳转到一个特定的元素,也可能在页面的末尾。通过跳转到它,用户不知道是否:

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

前两个可以通过滚动位置确定,但谁说用户在跳转之前跟踪滚动位置?所以这是一种不确定的行为。

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

动画scrollintoview jQuery插件拯救

这就是为什么仍有plugins that perform scroll into view而不是使用原生DOM功能的原因。它们通常动画滚动,消除了上面列出的所有3个问题。用户可以轻松跟踪运动。

答案 1 :(得分:13)

答案 2 :(得分:3)

我使用Matteo Spinnelli的iScroll-4,它也适用于iOS Safari。它有三个方法scrollTo,scrollToElement和scrollToPage。假设你有一个包含在div中的无序元素列表。正如罗伯特·科里特尼克(Robert Koritnik)上面所写,你需要有一个轻微的动画来表明你已经滚动了。以下方法实现了这种效果。

scrollToElement(element, time); 

答案 3 :(得分:1)

没试过这个,但似乎捎带内置的scrollIntoView函数会节省很多代码。如果你想要动画动作,我会怎么做:

  1. 将容器的当前滚动位置缓存为START POSITION
  2. 内置scrollIntoView
  3. 再次将滚动位置缓存为END POSITION
  4. 将容器返回START LOCITION
  5. 动画滚​​动到END POSITION

答案 4 :(得分:1)

请阅读有关scrollIntoViewIfNeeded

的信息
if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}

答案 5 :(得分:0)

您可以使用jQuery替代方法并为<html><body>元素设置动画:

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