Scroll horizontally starting from right to left with CSS overflow:scroll

Question

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

score 43 · Accepted Answer · edited Jul 19 '18 at 15:38

43

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/

edited Jul 19 '18 at 15:38

vsync

118,978
58
307
400

answered Jan 22 '14 at 20:45

Sajad Karuthedath

14,987
4
32
49

I somehow was applying `direction:rtl;` wrong I see now :S Super thank you – MMachinegun Jan 22 '14 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 '14 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 '14 at 23:20
@Voodoo Precisely, but that should be in the example so it keeps everything inside in the same order. – Trader Oct 23 '14 at 14:43
Doesn't work in Mobile IE: it scrolls in the wrong direction :-( – cleong Apr 14 '16 at 15:12
This is pure genius! – Francesco Pasa Sep 04 '18 at 19:47

score 7 · Answer 2 · answered Jan 22 '14 at 20:39

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

answered Jan 22 '14 at 20:39

DaniP

37,813
8
65
74

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 '14 at 20:49
:It is compitible with all major browsers http://www.w3schools.com/cssref/pr_text_direction.asp – Sajad Karuthedath Jan 22 '14 at 20:52
@Danko It has a wide usage in All RTL languages such as Persian, Arabic, Hebrew, ... – Hashem Qolami Jan 22 '14 at 20:58

score 3 · Answer 3 · edited Apr 16 '15 at 17:09

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;

edited Apr 16 '15 at 17:09

Andrei Sfat

8,440
5
49
69

answered Apr 16 '15 at 16:59

Diego De Granda

31
1

vbo · Answer 4 · 2014-01-22T20:49:35.300

2

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

edited Jan 22 '14 at 20:49

answered Jan 22 '14 at 20:42

vbo

13,583
1
25
33

score 1 · Answer 5 · answered Dec 06 '16 at 14:18

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/

answered Dec 06 '16 at 14:18

Benoît Condaminet

21
1

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 06 '16 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 – MMachinegun Dec 06 '16 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](http://jsfiddle.net/zztp36u3/) – MMachinegun Dec 06 '16 at 16:36

score 0 · Answer 6 · answered Jan 22 '14 at 20:47

0

You can do this with one line of jQuery:

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

answered Jan 22 '14 at 20:47

ElendilTheTall

1,344
15
23

But what happend if his page have just need jQuery for that ? – kevpoccs Jan 22 '14 at 20:48

score -1 · Answer 7 · answered Dec 03 '22 at 10:35

-1

Use direction rtl

overflow: auto; 
direction:rtl;

answered Dec 03 '22 at 10:35

Pankaj Upadhyay

2,114
21
22

Scroll horizontally starting from right to left with CSS overflow:scroll

7 Answers7

You can of course use `direction:rtl`

Linked

Scroll horizontally starting from right to left with CSS overflow:scroll

7 Answers7

You can of course use direction:rtl

Linked

You can of course use `direction:rtl`