I encountered a problem with the scrollTo function when the body has a dir=rtl attribute. Here's a jsfiddle showcasing my issue.
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>If I provide a positive value for the xpos parameter, it somewhat works on IE by scrolling from the right side of the screen for 200px. However, in Chrome and Firefox, it only works if I use a negative value for scrolling to behave as expected.
My query is how should I address this situation in my code - do I need to resort to browser sniffing? or is there a more optimal approach? Perhaps a feature detection method?