3

When using body {direction:rtl;} the horizontal scrollbar starts from the right, but in some browsers the vertical scrollbar also changes position (i.e. moves to the left). How can I avoid moving the vertical scrollbar and only change the direction of the horizontal scrollbar?

Update:

I've found that by setting someMainContainer {float:right;} I can force the page view to start from the right side. But this way, the horizontal scrollbar disappears! Any ideas?

Iryn
  • 255
  • 2
  • 5
  • 13
  • 1
    this might help you http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div/14150577#14150577 – Keith Jul 19 '13 at 15:25

1 Answers1

2

Not sure I understand your problem fully, but would setting overflow-x: hidden work for your problem?

You could also use this function in jQuery:

$(element).scroll(function () {
    this.scrollTop = 0;
});

This will basically force the page to scroll back to the top. You could use scrollLeft if you wanted to disable horizontal scrolling or both to disable all scrolling. In your case, the scrolling element would be window. A revised function:

$(window).scroll(function() {
    this.scrollTop = 0;
});

To scroll page to the right on page load, you could use the following after the document is ready (i.e $(document.ready()):

var rightPos = $(document).outerWidth() - $(window).width();
$('html, body').scrollLeft(rightPos);
lewiguez
  • 3,813
  • 1
  • 25
  • 40
  • Thanks, but that's not what I meant. My question is about changing the starting point of the horizontal scrollbar. – Iryn Jul 19 '13 at 15:38
  • When you say "starting point" do you mean the scroll position? because you could set that with Javascript as well. – lewiguez Jul 19 '13 at 15:39
  • Yes. When opening the webpage, I want the horizontal scrollbar to be set to right. – Iryn Jul 19 '13 at 15:43
  • Edited post to include code to scroll all the way to the right. Not sure if you mean stylistically or programmatically "set" still though. – lewiguez Jul 19 '13 at 15:54
  • Basically, I prefer to do it stylistically, but right now any working solution will do. It seems to me that your solution has a flaw, though; when maximizing the window and then minimizing it again, the scroll is again at the left. – Iryn Jul 19 '13 at 16:31
  • 1
    Yeah. I'm kind of doing this on the fly. You can add a 'resize' event listener, which would cover that. It would be `$(window).resize(function(){ var rightPos = $(document).outerWidth() - $(window).width(); $('html, body').scrollLeft(rightPos); });` – lewiguez Jul 19 '13 at 19:04
  • It might be helpful if you could post a jsfiddle of your problem. – lewiguez Jul 19 '13 at 19:04
  • Yeah, I had just found the `resize` event listener and wanted to add it here, and saw your new comment. As I am quite new to jquery, could you please tell me how should I use both `$(document.ready()` and `$(window).resize` in a correct way? Right now I'm just using `$( document ).ready(function() { //the code }); $(window).resize(function() { //the code reapeted again });` – Iryn Jul 19 '13 at 19:32
  • I found the rest of my answer [here](http://stackoverflow.com/a/7955727/1778592). Thanks @lewiguez, I mark this as answer. But, if anyone happened to know how to do the job with only css, please share it with us here. – Iryn Jul 19 '13 at 20:16