Question

当body具有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（有点）上运行，它会从屏幕右侧滚动200px。但是在chrome和firefox上它不起作用，我必须传递负值以使滚动按预期工作。

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

Answer 1

此代码段适用于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，片段会引起一点闪烁。您可以将m值存储在页面加载上，并在scrollTo的包装函数中重用它（或者就此而言是scrollBy）。您还可以重载这两个方法并将其全部保存在窗口上下文中。

Answer 2

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

这些实现之间的区别如下： scroll types

因为您无法使用jQuery我在此plunker修改了其他代码，并且它在chrome，firefox和IE11中运行良好

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

2 个答案: