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>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?
Share Improve this question asked Oct 28, 2014 at 14:08 Tamim Al ManaseerTamim Al Manaseer 3,7243 gold badges27 silver badges33 bronze badges 5-
jQuery's
animatemethod has optionsscrollTopandscrollLeft. The later one is probably doing what you are looking for. see api.jquery./animate and also stackoverflow./questions/6875054/jquery-animate-scrollleft – Adri w Ukraine Commented Oct 28, 2014 at 14:48 - If you want to do this in plain javascript, you may want to have a look at jQuery source code ;) – Adri w Ukraine Commented Oct 28, 2014 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 Commented Oct 28, 2014 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 Commented Oct 28, 2014 at 16:40
- unfortunately @McDaddy I don't scroll from offset 0 :S – Tamim Al Manaseer Commented Oct 28, 2014 at 17:07
2 Answers
Reset to default 1as 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:
because you can't use jQuery I've modified othree code in this plunker and it works fine in chrome, firefox and IE11
This snippet worked for me on IE and Chrome
http://jsfiddle/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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745331411a4622894.html
评论列表（0条）