27

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

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/

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

6 Comments

I somehow was applying direction:rtl; wrong I see now :S Super thank you
It does add all the elements inside the box, the direction: rtl, it might give unintended consequences to the direction of the text.
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 Precisely, but that should be in the example so it keeps everything inside in the same order.
Doesn't work in Mobile IE: it scrolls in the wrong direction :-(
|
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 Comments

@SajadLfc thanks but in this case you won. And I learn something new ... :D do you know if that property has any compatibility issue?
:It is compitible with all major browsers w3schools.com/cssref/pr_text_direction.asp
@Danko It has a wide usage in All RTL languages such as Persian, Arabic, Hebrew, ...
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;

Comments

2

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

Comments

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 Comments

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?
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
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
0

You can do this with one line of jQuery:

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

1 Comment

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

Use direction rtl

overflow: auto; 
direction:rtl; 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.