«Домашнее» плавно исчезает прокрутка

Question

Я пробовал это jQuery plugin (Malihu scrollbar), чтобы добавить удивительные пользовательские полосы прокрутки в мои проекты и работает на простых веб-сайтах. Тем не менее, я устал использовать его в довольно сложных адаптивных проектах макета, и он не работает. Я не понимаю механизм прокрутки Malihu (исходный код довольно большой), поэтому не знаю, как адаптироваться, если для моего проекта.

Итак, мне удалось создать полосу прокрутки с механизмом, который я могу понять. Требования являются:

1. Толстых
2. Полупрозрачный
3. Плавно исчез при прокрутке закончился, и вновь появляется при прокрутке начала.
4. Не влияйте на макет (на языке графических редакторов полоса прокрутки находится в верхнем слое и не влияет на другие слои).
5. Кросс-браузер и кросс-платформенный.

Решение для 1 и 2 довольно просто, следующее - это анимация и независимость в отношении макета. Пожалуйста, покажите мне самое простое решение (ОК, чтобы использовать jQuery).

Я подготовил jsfiddle (в настоящее время правильный список прокрутки в Chrome) с очищенными 1 и 2 задачами, чтобы сэкономить ваше время. (Там нет необходимости, чтобы вставить здесь исходный код, но srackoverflow требует его jsfiddle ссылки)

html { 
    overflow: auto; 
} 
body { 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 5px; 
} 

::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(50,50,50,0.5); 
} 

Answer 1

Я бы лично рекомендую этот хорошо известный плагин: Prefect Scrollbar

Это очень настраиваемый и простой использовать. Плагин предназначен для работы в современных браузерах и поддерживает IE 10 и выше.

У этого есть поддержка логики внешнего вида, но я не уверен, что она точно соответствует вашим потребностям. Посмотрите на это.

Если вам все еще нужен скроллбар исчезнуть на всей странице, когда не прокрутки, для того, чтобы достичь вашего 3-го требования, вы можете переопределить плагины CSS, как вам нужно & использовать событие плагин поддерживает, например:

Alter внешний вид по умолчанию логике, чтобы сделать его невидимым, как по умолчанию:

.ps-container:hover>.ps-scrollbar-x-rail, 
.ps-container:hover>.ps-scrollbar-y-rail { 
    opacity: 0; 
} 

И добавить:

.is-scrolling .ps-scrollbar-x-rail, 
.is-scrolling .ps-scrollbar-y-rail { 
    opacity: .6; 
} 

Затем добавьте пользовательский класс (например, is-scrolling) к одному элементу вы применили плагин, обжиг события свитка плагин, что только тогда делает прокрутки появляются, например:

$(document).on('ps-scroll-x ps-scroll-y', function() { 
    $("body").addClass("is-scrolling"); 
}); 

Answer 2

Я лично рекомендовал хороший плагин: enscroll

С плагином encroll jQuery, возможность писать собственные стили для этих полос прокрутки - это всего лишь несколько строк Javascript.

• Положение и размер скроллинга регулируется автоматически в перемещении панели прокрутки, изменить размер панели скроллинга или изменять содержимое Прокрутка панели в
• Поддержка сенсорных событий - полная поддержка мобильных устройств, таблетки и другие сенсорные устройства - Теперь в комплекте с свитком ослабления
• Необязательно, держать скроллбары скрытые до тех пор, пока пользователь не парит над панелью просмотра
• управления, как далека прокруткой элементы прокручиваются, когда с помощью мыши колеса или клавиш со стрелками на клавиатуре
• Вы контролируете имена классов элементов ScrollBar, чтобы любое сочетание стилей ScrollBar вам нужно на той же странице
• сохранить семантику - вам не нужно добавьте любые дополнительные теги в свою разметку . Поскольку enscroll добавляет эту сторону клиента, вы можете сохранить первоначального DOM пологой

HTML

<div id="scrollbox3"> 
<h1>New Scrolling Window</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p> 
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
</div> 

CSS

#scrollbox3 { 
    overflow: auto; 
    width: 400px; 
    height: 360px; 
    padding: 0 5px; 
    border: 1px solid #b7b7b7; 
} 

.track3 { 
    width: 10px; 
    background: rgba(0, 0, 0, 0); 
    margin-right: 2px; 
    border-radius: 10px; 
    -webkit-transition: background 250ms linear; 
    transition: background 250ms linear; 
} 

.track3:hover, 
.track3.dragging { 
    background: #d9d9d9; /* Browsers without rgba support */ 
    background: rgba(0, 0, 0, 0.15); 
} 

.handle3 { 
    width: 7px; 
    right: 0; 
    background: #999; 
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 7px; 
    -webkit-transition: width 250ms; 
    transition: width 250ms; 
} 

.track3:hover .handle3, 
.track3.dragging .handle3 { 
    width: 10px; 
} 

JS

$('#scrollbox3').enscroll({ 
    showOnHover: true, 
    verticalTrackClass: 'track3', 
    verticalHandleClass: 'handle3' 
}); 

Здесь я делаю небольшую демонстрацию. Have a look.