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

IT技术 javascript jquery js-scrollintoview
2021-03-02 03:37:12

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

6个回答

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

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

  • 页面已向上滚动
  • 页面已向下滚动
  • 他们被重定向到别处

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

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

scrollintoview用于救援的动画jQuery 插件

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

Firefox 似乎支持behavior: "smooth"，但不支持Chrome 或 Safari。
2021-04-19 03:37:12
@Flimm 既不在 IE/Edge 中。请参阅参考资料，只有 FF36+ 有此功能。因此，不幸的是，它是无用的。
2021-05-06 03:37:12
ScrollIntoViewOptions允许指定的新规范behavior: 'smooth'。不幸的是，无法轻松检测浏览器是否支持此选项......
2021-05-12 03:37:12
这对于创建自定义下拉菜单很有用，其中箭头键控制向上/向下，并根据所选项目滚动菜单。在这种情况下，如果不让它在项目之间立即跳转，那将是一种糟糕的用户体验。
2021-05-12 03:37:12
注意：如果滚动元素在 iframe 中（出于显而易见的原因），jQuery 插件将不起作用（正确）。element.scrollIntoView 即使那样也能工作。
2021-05-14 03:37:12

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

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

scrollToElement(element, time);
您指向 iScroll-4 的链接已失效
2021-04-27 03:37:12

请阅读关于 scrollIntoViewIfNeeded 

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

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

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
其它你可能感兴趣的问题
上一篇CORS 政策已阻止从源“null”访问图像 下一篇如何计算具有相同类的元素的数量？