Контролировать положение горизонтальной полосы прокрутки без плагина

Question

Мне нужна твоя помощь. Может быть, намек достаточно. Что-то, чего я не видел ...

Я хочу, чтобы горизонтальная полоса прокрутки (прокрутка класса) динамически scrollLeft к началу видимой части div с классом right. Пожалуйста, ознакомьтесь с комментариями в css-части.

Ширина элементов div (класс: left / right) изменяется динамически позже. Поэтому мне как-то нужно расположить полосу прокрутки в начале правой части.

Граница всегда располагается в середине экрана. Правая часть должна располагаться справа от границы, левая часть слева.

У вас есть идеи, как это сделать? Я знаю, что это сложно объяснить. Пожалуйста, спросите.

Это мой фрагмент кода.

<!-- 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

В элементе scollLeft есть свойство.Он получает или устанавливает количество пикселей, на которое содержимое элемента прокручивается влево.

Для вашей конкретной проблемы, если вы хотите использовать jQuery, этот фрагмент может помочь вам:

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

Вот пример jsFiddle .