Javascript window.scrollTo Behavior On Different Browsers

Question

I'm facing an issue with the scrollTo function when the body has an dir=rtl attribute. here is a jsfiddle for my case.

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.

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?

jQuery's `animate` method has options `scrollTop` and `scrollLeft`. The later one is probably doing what you are looking for. see http://api.jquery.com/animate/ and also http://stackoverflow.com/questions/6875054/jquery-animate-scrollleft — Adriano, Oct 28 '14 at 14:48
If you want to do this in plain javascript, you may want to have a look at jQuery source code ;) — Adriano, Oct 28 '14 at 14:50
@AdrienBe I cant use jquery, and I checked the source code, it doesn't do anything, just a wrapper that has the same problem. — Tamim Al Manaseer, Oct 28 '14 at 15:20
Maybe you can try checking the current scroll position before and after the scroll, if there was no change, you can scroll using the negative value (this will only work if you're scrolling from offset 0). — McDaddy, Oct 28 '14 at 16:40

khusseini · Answer 1 · 2014-10-29T05:21:40.047

This snippet worked for me on IE and 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);

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.

Here an update to the fiddle: http://jsfiddle.net/05w4tr0g/6/ The previous one didn't store the original scrollbar position correctly — khusseini, Oct 29 '14 at 05:32

score 1 · Accepted Answer · answered Oct 29 '14 at 10:36

as othree explains in his jQuery rtl scroll type plugin there are 3 main implementations for horizontal scrolling when dir is set to rtl: WebKit, Firefox/Opera and IE

the difference between these implementations is as follows: scroll types

because you can't use jQuery I've modified othree code in this plunker and it works fine in chrome, firefox and IE11

Javascript window.scrollTo Behavior On Different Browsers

2 Answers2