scrollIntoView 是否适用于所有浏览器？
[英]Does scrollIntoView work in all browsers?
问题描述
Does scrollIntoView() work in all browsers? 
scrollIntoView()是否适用于所有浏览器？ If not is there a jQuery alternative?如果没有，是否有jQuery替代品？
7 个解决方案
解决方案1
80 已采纳 2012-02-25 16:55:16
It is supported yes, but user experience is... bad. 它支持是，但用户体验是......糟糕的。
As @9bits pointed out, this has long been supported by all major browsers . 正如@ 9bits所指出的，这一直是所有主流浏览器都支持的 。 Not to worry about that. 不用担心。 The main problem is the way that it works. 主要问题是它的工作方式。 It simply jumps to a particular element that may as well be at the end of the page. 它只是跳转到一个特定的元素，也可能在页面的末尾。 By jumping to it, users have no idea whether: 通过跳转到它，用户不知道是否：
- page has been scrolled up 页面已向上滚动
- page has been scrolled down 页面已向下滚动
- they've been redirected elsewhere 他们被重定向到其他地方
The first two can be determined by scroll position, but who says users kept track of scroll position before jump was done? 前两个可以通过滚动位置确定，但谁说用户在跳转之前跟踪滚动位置？ So it's an nondeterministic action. 所以这是一种不确定的行为。
The last one may be true especially if the page has moving header that gets scrolled out of view and remaining page design doesn't imply anything on being on the same page (if it also doesn't have any total height vertical element like left menu bar). 最后一个可能是真的，特别是如果页面具有滚动视图的移动标题并且剩余页面设计不暗示在同一页面上的任何内容（如果它也没有任何总高度垂直元素，如左菜单酒吧）。 You'd be surprised how many pages have this problem. 有多少页面有这个问题你会感到惊讶。 just check them out yourself. 亲自检查一下。 Go to some page, look at it at top, then press End key and look at it again. 转到某个页面，在顶部查看，然后按结束键再次查看。 It is likely that you'll think it's a different page. 您可能会认为这是一个不同的页面。
Animated scrollintoview jQuery plugin to the rescue 动画scrollintoview jQuery插件来救援
That's why there still are plugins that perform scroll into view instead of using native DOM function. 这就是为什么仍然有插件执行滚动到视图而不是使用本机DOM功能。 They usually animate scrolling which eliminates all 3 issues outlined above. 它们通常动画滚动，消除了上面列出的所有3个问题。 Users can easily keep track of the movement. 用户可以轻松跟踪运动。
解决方案2
13 2012-02-25 16:40:27
看起来像这样： http ： //www.quirksmode.org/dom/w3c_cssom.html
解决方案3
3 2012-11-18 09:13:23
I use Matteo Spinnelli's iScroll-4 and it works in iOS safari as well. 我使用Matteo Spinnelli的iScroll-4 ，它也适用于iOS Safari。 It has three methods scrollTo, scrollToElement and scrollToPage. 它有三个方法scrollTo，scrollToElement和scrollToPage。 Let's say you have an unordered list of elements wrapped inside a div. 假设你有一个包含在div中的无序元素列表。 As Robert Koritnik has written above, you need to have that slight animation to show that you have scrolled. 正如罗伯特·科里特尼克（Robert Koritnik）上面所写，你需要有一个轻微的动画来表明你已经滚动了。 The below method achieves that effect. 以下方法实现了这种效果。
scrollToElement(element, time);
解决方案4
1 2014-11-25 05:09:31
Have not tried this, but seems like piggybacking on built in scrollIntoView function would save much code. 没试过这个，但似乎捎带内置的scrollIntoView函数会节省很多代码。 Here is what I would do if you want animated action: 如果你想要动画动作，我会怎么做：
- Cache current scroll position of the container as START POSITION 将容器的当前滚动位置缓存为START POSITION
- run built in scrollIntoView 运行内置在scrollIntoView中
- Cache the scroll position again as the END POSITION 将滚动位置再次缓存为END POSITION
- Return container back to START POSITION 将容器返回到START POSITION
- Animate scrolling to END POSITION 动画滚动到结束位置
解决方案5
1 2017-02-02 08:12:30
read please about scrollIntoViewIfNeeded 请阅读有关scrollIntoViewIfNeeded的信息
if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
解决方案6
0 2018-06-20 13:07:19
You can use jQuery alternative and animate <html> and <body> elements: 您可以使用jQuery替代和动画<html>和<body>元素：
$('html, body').animate({
scrollTop: $("#myElem").offset().top
}, 1000);
解决方案7
0 2022-08-09 09:42:54
Css solved it guys.! Css 解决了伙计们！ I picked the target id with #idSelected and styled it with css "scroll-margin-top" and defined my margin top in rems (use what ever measurement that suits you).我用#idSelected 选择了目标ID，并用css“scroll-margin-top”设置了它的样式，并以rems 定义了我的边距顶部（使用适合您的任何测量值）。
#idSelected {
scroll-margin-top: 10rem;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.