Свертывание разделителей для пользовательской вертикальной полосы прокрутки

Question

У меня есть обычная вертикальная полоса прокрутки. Он имеет следующую структуру:

div (general container)-- style table height 300 px 

    div "uparrow" style tablerow height 20px 

    div "slider"  style tablerow NO height (automATIC) 

     div "line or guide" 

     div "for handle" 

    div "downarrow" style tablerow height 20px 

Ok, это работает отлично. Я могу изменить общую высоту контейнера, и каждый размер будет изменен правильно.

Моя проблема: я хочу поместить вертикальную ручку в «ползунок». (У меня есть javascript-код, чтобы установить style.top)

Я хочу «центр» для линии & ручка. Использование margin-left: auto margin-right: auto отлично работает для «линии», но слайдер не помещается в поле.

Я играю с некоторыми относительными/абсолютными комбинациями без успеха.

Также я играю, размещая ручку внутри линии, также с неправильными результатами.

Изображение показывает, что я хочу (в этом случае UpArrow & DownArrow пустые)

Любые идеи и посоветовать?

Answer 1

Родитель DIV должен position: relative. Кнопка ползунка position: absolute и left: 50%margin-left должна составлять минус половину ее ширины. Пример, если ширина равна 20px, маржа слева должна быть -10px.

Позиция абсолютная позволяет пропустить кнопку над ползунком. Отношение позиции заставляет ползунок подчиняться смещению родительского div. Левая 50% помещает левую границу элемента в центр. Фактическое центрирование выполняется по левому краю. Он устанавливает элемент назад с половиной его ширины.

С чистым примером CSS:

div.sliderContainer { 
     width: 30px; 
     height: 300px; 
     background-color: #EEEEEE; 
     border: 2px solid #99B2FF; 
     border-radius: 3px 3px 3px 3px; 
     box-sizing: border-box; 
     position: relative; 
     padding: 10px 0px 10px 0px; 
    } 

    div.sliderLine { 
     width: 4px; 
     outline: 1px solid #888888; 
     background-color: #AAAAAA; 
     box-shadow: inset 1px 1px 0px #ffffff; 
     margin: auto auto; 
     box-sizing: border-box; 
     height: 100%; 
    } 

    div.sliderButton { 
     box-sizing: border-box; 
     width: 20px; 
     margin-left: -10px; 
     position: absolute; 
     left: 50%; 
     top: 20px; 
     height: 30px; 
     border: 1px solid #AAAAAA; 
     border-radius: 3px 3px 3px 3px; 
     background-color: #EEEEEE; 
     box-shadow: inset 1px 1px 0px #ffffff;   
    } 

HTML

<div id="slider_01" class="sliderContainer"> 
    <div class="sliderLine"></div> 
    <div class="sliderButton"></div> 
</div> 

fiddle в качестве доказательства.