23

So I am wondering if there is a possibility to have a different starting position with the overflow:scroll value;

When you start scrolling in a div the default behaviour is to scroll from left to right:

|<--Scrollbar-Starting-Left-->_________________________________________________|

would it possible that it starts at the right?

|_________________________________________________<--Scrollbar-Starting-Right-->|

In my example the red and green items are first visible, I'd like the green and blue item to be visible first :)

I've tried direction:rtl; but no luck

7 Answers 7

42

You can of course use direction:rtl

document.querySelector('input').addEventListener('input', function(){
  document.querySelector('.box').scrollLeft = this.value;
})
.box{
  width: 320px;
  height: 100px;
  border:1px solid red;
  overflow: scroll;
  direction: rtl;  /* <-- the trick */
}

.box::before{ content:''; display:block; width:400%; height:1px; }
<div class='box'></div>
<br>
<input placeholder='scrollLeft value'>

FiddleDemo

This may be useful using direction http://css-tricks.com/almanac/properties/d/direction/

6
  • I somehow was applying direction:rtl; wrong I see now :S Super thank you Jan 22, 2014 at 21:08
  • 2
    It does add all the elements inside the box, the direction: rtl, it might give unintended consequences to the direction of the text.
    – Trader
    Oct 21, 2014 at 17:49
  • 1
    Wow, that's a lot more simple than I assumed it might be. Thanks! To @Trader's point - you can put a child element inside with direction set by to ltr
    – Voodoo
    Oct 22, 2014 at 23:20
  • @Voodoo Precisely, but that should be in the example so it keeps everything inside in the same order.
    – Trader
    Oct 23, 2014 at 14:43
  • Doesn't work in Mobile IE: it scrolls in the wrong direction :-(
    – cleong
    Apr 14, 2016 at 15:12
7

I don't Know about any solution with just CSS but you can use Jquery to change the initial position of the scrollbar like this:

$(document).ready(function(){
    $('#box').scrollLeft($(this).height())
})

Check this Demo Fiddle

3
  • 1
    @SajadLfc thanks but in this case you won. And I learn something new ... :D do you know if that property has any compatibility issue?
    – DaniP
    Jan 22, 2014 at 20:49
  • :It is compitible with all major browsers w3schools.com/cssref/pr_text_direction.asp Jan 22, 2014 at 20:52
  • @Danko It has a wide usage in All RTL languages such as Persian, Arabic, Hebrew, ... Jan 22, 2014 at 20:58
3

I've been working in a project and for me works very well like this:

overflow-x: scroll;   
overflow-y: hidden;   
white-space: nowrap;
2

With javascript you can just set scrollLeft property when page gets loaded (using el.scrollLeft = el.scrollWidth - el.clientWidth;).

1

There is an unexpected behavior if you add closing parenthesis at the end of text for the top answer. (Tested in Chrome 54)

<div id="box">
    <div id="inner_box">
        <div class="item" style="background:red;"></div>
        <div class="item" style="background:green;"></div>
        <div class="item" style="background:blue;">te(st)</div>
    </div>
</div>

Watch this feedle for result : http://jsfiddle.net/mm37pqxa/

3
  • It is unclear what the unexpected behavior is. Please elaborate and explain what your answer adds over and above the existing answers. How does this answer address the OP's question?
    – Brian D
    Dec 6, 2016 at 14:50
  • your demonstrated fiddle has an issue even if you center your text or align it to the left. The closing bracket is cut off either way, so I don't think this is an issue with the scrolling itself, it's definitively an other issue unrelated to the scrolling. Cheers Dec 6, 2016 at 16:25
  • Okay, never mind my previous answer. You are right, direction:rtl; does change the alignment of some characters. I think it's symbols like ?, ! and . Somehow the bracket falls into this as well. I guess this has to do with the direction text normally flows when being red in a rtl-language. Your fix to this would be to assign direction: ltr; to your child-element to reinstate the "normal" right-to-left flow again. fiddle Dec 6, 2016 at 16:36
0

You can do this with one line of jQuery:

$("#box").scrollLeft(480);

1
  • But what happend if his page have just need jQuery for that ?
    – kevpoccs
    Jan 22, 2014 at 20:48
-1

Use direction rtl

overflow: auto; 
direction:rtl; 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.