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

vsync · Accepted Answer · 2018-07-19 15:38:08Z

45

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, 2018 at 15:38

vsync

133k59 gold badges344 silver badges430 bronze badges

answered Jan 22, 2014 at 20:45

Sajad Karuthedath

16.2k4 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MMachinegun Over a year ago

I somehow was applying direction:rtl; wrong I see now :S Super thank you

Trader Over a year ago

It does add all the elements inside the box, the direction: rtl, it might give unintended consequences to the direction of the text.

Voodoo Over a year ago

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

Trader Over a year ago

@Voodoo Precisely, but that should be in the example so it keeps everything inside in the same order.

cleong Over a year ago

Doesn't work in Mobile IE: it scrolls in the wrong direction :-(

|

DaniP · Accepted Answer · 2014-01-22 20:39:59Z

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, 2014 at 20:39

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

3 Comments

DaniP Over a year ago

@SajadLfc thanks but in this case you won. And I learn something new ... :D do you know if that property has any compatibility issue?

Sajad Karuthedath Over a year ago

:It is compitible with all major browsers w3schools.com/cssref/pr_text_direction.asp

Hashem Qolami Over a year ago

@Danko It has a wide usage in All RTL languages such as Persian, Arabic, Hebrew, ...

Andrei Sfat · Accepted Answer · 2015-04-16 17:09:00Z

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, 2015 at 17:09

Andrei Sfat

8,6265 gold badges56 silver badges71 bronze badges

answered Apr 16, 2015 at 16:59

Diego De Granda

311 bronze badge

Comments

vbo · Accepted Answer · 2014-01-22 20:49:35Z

2

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

edited Jan 22, 2014 at 20:49

answered Jan 22, 2014 at 20:42

vbo

13.6k1 gold badge27 silver badges33 bronze badges

Comments

Benoît Condaminet · Accepted Answer · 2016-12-06 14:18:32Z

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 6, 2016 at 14:18

Benoît Condaminet

211 bronze badge

3 Comments

Brian D Over a year ago

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?

MMachinegun Over a year ago

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 Over a year ago

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

ElendilTheTall · Accepted Answer · 2014-01-22 20:47:34Z

0

You can do this with one line of jQuery:

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

answered Jan 22, 2014 at 20:47

ElendilTheTall

1,50219 silver badges27 bronze badges

1 Comment

kevpoccs Over a year ago

But what happend if his page have just need jQuery for that ?

Pankaj Upadhyay · Accepted Answer · 2022-12-03 10:35:50Z

-1

Use direction rtl

overflow: auto; 
direction:rtl;

answered Dec 3, 2022 at 10:35

Pankaj Upadhyay

2,12022 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

You can of course use `direction:rtl`

6 Comments

3 Comments

Comments

Comments

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

You can of course use direction:rtl

6 Comments

3 Comments

Comments

Comments

3 Comments

1 Comment

Comments

Linked

Related

You can of course use `direction:rtl`