Javascript window.scrollTo 在不同浏览器上的行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26610423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript window.scrollTo Behavior On Different Browsers
提问by Tamim Al Manaseer
I'm facing an issue with the scrollTo function when the body has an dir=rtl attribute. here is a jsfiddlefor my case.
当主体具有 dir=rtl 属性时，我遇到了 scrollTo 函数的问题。这是我的案例的jsfiddle。
HTML:
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>So if I pass a positive value for the xpos parameter, it works on IE (sort of) naturally, it scrolls from the right side of the screen for an amount of 200px. but on chrome and firefox it doesn't work, I have to pass a negative value for the scrolling to work as expected.
因此，如果我为 xpos 参数传递一个正值，它自然适用于 IE（有点），它从屏幕右侧滚动 200 像素。但是在 chrome 和 firefox 上它不起作用，我必须为滚动传递一个负值才能按预期工作。
My question, is how I can handle this case in my code, should I do browser sniffing? or is there a better way? some feature I can test if its supported?
我的问题是如何在我的代码中处理这种情况，我应该进行浏览器嗅探吗？或者，还有更好的方法？我可以测试某些功能是否受支持？
回答by moz
This snippet worked for me on IE and Chrome
这个片段在 IE 和 Chrome 上对我有用
http://jsfiddle.net/05w4tr0g/4/
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);
Hope that helps. The idea is that that the pageXOffset is with IE and Chrome always negative if there was scrolling. The snippet will cause a little flicker because of the test scroll to x=0 and x=-1. You could store the m value on a page load and reuse it in a wrapper function for scrollTo (or scrollBy for that matter). You could also overload the two methods and keep it all in the window context.
希望有帮助。这个想法是，如果有滚动，则 pageXOffset 与 IE 和 Chrome 总是负数。由于测试滚动到 x=0 和 x=-1，该代码段会引起一点闪烁。您可以在页面加载时存储 m 值，并在 scrollTo （或 scrollBy 就此而言）的包装函数中重用它。您还可以重载这两种方法并将它们全部保存在窗口上下文中。
回答by Mohammad Shahrouri
as othree explainsin his jQuery rtl scroll type plugin there are 3 main implementations for horizontal scrolling when diris set to rtl: WebKit, Firefox/Opera and IE
正如othree在他的 jQuery rtl 滚动类型插件中解释的那样，当dir设置为rtlWebKit、Firefox/Opera 和 IE时，水平滚动有 3 个主要实现
the difference between these implementations is as follows:
这些实现之间的区别如下：
because you can't use jQuery I've modified othree code in this plunkerand it works fine in chrome, firefox and IE11
因为你不能使用 jQuery 我在这个plunker 中修改了 othree 代码，它在 chrome、firefox 和 IE11 中运行良好
