Question

I need your help. Maybe a hint is enough. Something I haven’t seen…

I want the horizontal scrollbar (class scroll) to dynamically scrollLeft to the beginning of the visible part of the div with class right. Please have a look at the comments in the css-part.

The width of the divs (class: left/right) varies dynamically later on.
So I somehow have to position the scrollbar to the beginning of the right part.

The border is positioned in a middle of the screen always. The right part should be positioned right from the border, the left part left.

Have you got any idea how to do it?
I know that it is tricky to explain. Please ask.

This is my snippet of code.

<!-- HTML -->
<div class="width100">
    <div class="scroll">
        <div class="outer">
            <div class="border"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</div>

–

<!-- CSS -->
.width {
    width:100%;
}
.scroll {
    overflow-x: scroll;
}
.outer {
    width: 960px;
    height: 55px;
    background-color: orange;
}
.border {
    width: 2px;
    height: 55px;
    margin-left:50%;
    position:absolute;
    background-color:black; // will be background-image with width: 960px;
}
.left {
    float: left;
    width: 400px; //varies
    height: 55px;
    position:relative;    
}
.right {
    width:560px; //varies
    float: left;
    height: 55px;
    background-color:green; // will be background-image with width: 960px;
}

–

<!-- Javascript -->
$('.scroll').scrollLeft(/*to position?*/);

Answer 1

There is a property on an element called scollLeft.
It gets or sets the number of pixels that an element’s content is scrolled to the left.

For your specific issue, if you want to go with jQuery, this snippet might help you:

$('.scroll')[0].scrollLeft = $('.left').width()

Here’s a jsFiddle example.