0

Здравствуйте.
С помощью чего можно изменить внешний вид скроллбара?
Решения на основе jQuery, scrollbar-- и ::webkit-scrollbar не подходят. Можно даже не кодом, а на словах.

2 ответа 2

1

HTML:

<div id='container'>
        <div id='main'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div id='scroll'></div>
    </div>

CSS:

#container {
        overflow: hidden;
        width: 100px; 
        top: 50px; 
        height: 300px;
        position: absolute;
    }
    #scroll {
        width: 10px;
        height: 50px;
        position: absolute;
        right: 0;
        top: 0;
        background: #555;
        border-radius: 100%
    }
    #main {
        position: relative;
    }

Javascript:

    var get = function(obj) {
    return document.getElementById(obj)
},
height = get('container').offsetHeight,
top,
scrollHeight = 50;
get('scroll').onmousemove = function(e) {
    get('scroll').style.top = e.clientY - get('container').offsetTop + 'px';
    get('main').style.top = (-e.clientY - get('container').offsetTop + 50) * (get('main').offsetHeight / height) + height + 'px';
}

Jsfiddle

1

Решения на основе jQuery, scrollbar-- и ::webkit-scrollbar не подходят

Ну тогда - магия!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.