scrollIntoView是否可以在所有浏览器中使用？

82

是否scrollIntoView()在所有浏览器的工作？如果没有，还有jQuery其他选择吗？

javascript jquery js-scrollintoview

— 9位
source

81

支持，是的，但是用户体验很差。

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

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

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

最后一个可能是正确的，特别是如果页面具有移动的页眉而滚动到视图之外并且剩余页面设计并不暗示同一页面上有任何内容（如果它也没有任何总高度的垂直元素，例如左侧菜单）酒吧）。您会惊讶于有多少页面出现此问题。自己检查一下即可。转到某个页面，在顶部查看，然后End按键并再次查看。您可能会认为这是另一页。

动画`scrollintoview`jQuery插件进行了抢救

这就是为什么仍然有一些插件可以滚动到视图中，而不是使用本机DOM函数。它们通常为滚动动画，这消除了上面概述的所有3个问题。用户可以轻松跟踪运动情况。

— 罗伯特·科里特尼克
source

1

注意：如果滚动元素位于iframe中，则jQuery插件不起作用（正确）（出于明显的原因）。即使在那时，element.scrollIntoView仍然可以工作。

— panzi 2014年

7

的新规范ScrollIntoViewOptions允许指定behavior: 'smooth'。不幸的是，无法轻松检测浏览器是否支持此选项……

— 飞羊

6

Firefox似乎支持behavior: "smooth"，但Chrome或Safari不支持。

— Flimm

1

这对于创建自定义下拉菜单（其中箭头键控制上/下以及菜单滚动取决于所选项目）很有用。在这种情况下，如果不立即在项目之间跳转，将是一种糟糕的用户体验。

— user2867288

1

@Flimm都不在IE / Edge中。请参阅参考资料，仅FF36 +具有此功能。因此，很遗憾，它没有用。

— Alex Zhukovskiy

13

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

— 9位
source

3

我使用Matteo Spinnelli的iScroll-4，它也可以在iOS Safari中使用。它具有三个方法scrollTo，scrollToElement和scrollToPage。假设您在div中包装了一个无序的元素列表。正如罗伯特·科里特尼克（Robert Koritnik）在上文中所写，您需要具有轻微的动画来显示滚动。下面的方法可以达到这种效果。

scrollToElement(element, time);

— 塔达索鲁
source

2

您与iScroll-4的链接已死

— 罗曼·文森特

1

还没有尝试过，但是似乎piggy带内置的scrollIntoView函数可以节省很多代码。如果您想要动画动作，这是我会做的：

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

— 莱克斯
source

1

请阅读有关scrollIntoViewIfNeeded

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

— 左旋
source

0

您可以使用jQuery Alternative和animate<html>和<body>elements：

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

— S1awek
source

scrollIntoView是否可以在所有浏览器中使用？

支持，是的，但是用户体验很差。

动画scrollintoviewjQuery插件进行了抢救

动画`scrollintoview`jQuery插件进行了抢救