Contrôler la position de la barre de défilement horizontale sans plugin

J'ai besoin de votre aide. Peut-être une allusion est assez. Quelque chose que je n'ai pas vu...

Je veux que la barre de défilement horizontale (classe de défilement) de façon dynamique scrollLeft le début de la partie visible de la div avec la classe à droite. Jetez un oeil sur les commentaires dans le css-partie.

La largeur de la divs (catégorie: gauche/droite) varie de façon dynamique plus tard.
Donc j'ai en quelque sorte à la position de la barre de défilement pour le début de la partie droite.

La frontière est placé dans un milieu de l'écran toujours. La partie droite doit être positionné à droite de la frontière, la partie de gauche de gauche.

Avez-vous une idée de comment le faire?
Je sais que c'est difficile à expliquer. Vous pouvez le demander.

C'est mon bout de 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?*/);