Javascript window.scrollTo 在不同浏览器上的行为答案

【问题标题】：Javascript window.scrollTo Behavior On Different BrowsersJavascript window.scrollTo 在不同浏览器上的行为
【发布时间】：2014-10-29 18:36:51
【问题描述】：

当正文具有 dir=rtl 属性时，我遇到了 scrollTo 函数的问题。这是我的情况下的jsfiddle。

HTML：

    window.scrollTo(-200, 0);

<html>
	<head>

	</head>
	<body  dir="rtl">
		<div width="100%" style="width: 3000px; height:200px; overflow: hidden">
			<div style="width: 1000px; height: 100px; border: 2px solid black; display: inline-block"></div>
			<div style="width: 1000px; height: 100px; border: 2px solid red; display: inline-block"></div>
		</div>
		<script type="text/javascript">
			
			window.scrollTo(-200, 0);
		</script>
	</body>
</html>

因此，如果我为 xpos 参数传递一个正值，它自然会在 IE 上运行（有点），它会从屏幕右侧滚动 200 像素。但是在 chrome 和 firefox 上它不起作用，我必须传递一个负值才能使滚动按预期工作。

我的问题是如何在我的代码中处理这种情况，我应该进行浏览器嗅探吗？或者，还有更好的方法？我可以测试一些功能是否支持？

【问题讨论】：

jQuery 的animate 方法有scrollTop 和scrollLeft 选项。后一个可能正在做你正在寻找的东西。见api.jquery.com/animate 和stackoverflow.com/questions/6875054/jquery-animate-scrollleft
如果你想用纯 javascript 做这个，你可能想看看 jQuery 源代码 ;)
@AdrienBe 我不能使用jquery，我检查了源代码，它没有做任何事情，只是一个有同样问题的包装器。
也许您可以尝试检查滚动前后的当前滚动位置，如果没有变化，您可以使用负值滚动（这仅在您从偏移量0滚动时才有效） .
不幸的是@McDaddy 我没有从偏移量 0 滚动：S

标签： javascript internet-explorer google-chrome firefox

【解决方案1】：

othree explains 在他的 jQuery rtl 滚动类型插件中，当 dir 设置为 rtl 时，水平滚动有 3 个主要实现：WebKit、Firefox/Opera 和 IE

这些实现的区别如下：

因为你不能使用 jQuery，所以我在 plunker 中修改了三个代码，它在 chrome、firefox 和 IE11 中运行良好

【讨论】：

【解决方案2】：

这个 sn-p 在 IE 和 Chrome 上为我工作

http://jsfiddle.net/05w4tr0g/4/

var m = -1;
var pos = window.pageXOffset;
window.scrollTo(0,0);
window.scrollTo(1, 0);
if (-1 == window.pageXOffset) m = 1;
window.scrollTo(pos, 0);
window.scrollTo(m*200, 0);

希望对您有所帮助。这个想法是 pageXOffset 在 IE 和 Chrome 中总是负面的，如果有滚动。由于测试滚动到 x=0 和 x=-1，sn-p 会导致一点点闪烁。您可以将 m 值存储在页面加载中，并在 scrollTo （或 scrollBy ）的包装函数中重用它。您还可以重载这两个方法并将其全部保存在窗口上下文中。

【讨论】：

这里对小提琴的更新：jsfiddle.net/05w4tr0g/6 上一个没有正确存储原始滚动条位置