Как изменить поведение ScrollBar?

Question

Я работаю над документом в HTML, и я хочу изменить поведение ScrollBar, что при прокрутке он отправляет вас в определенную позицию документа.

Answer 1

Для этого вам нужно se javascript. jQuery (а библиотека JavaScript) поможет вам некоторым встраивать функции, как .on('scroll') и .scrollTop()

Как это не ясно из вашего вопроса, когда прокручивать, где я только что пытался сделали легко понять пример. Прослушивание в позиции прокрутки окна и когда оно достигает 3000px сверху, оно возвращается к положению 800px сверху. Если вы хотите попробовать поиграть с ним. Не забудьте включить jQuery! За помощью оставляйте комментарий.

$(window).scroll(function() { 
 
    $(".show-position").html($(window).scrollTop()); 
 
    
 
    if(3000 < $(window).scrollTop()) { 
 
    $("html, body").scrollTop(800); 
 
    } 
 
    
 
});

.show-position { 
 
    position: fixed; 
 
    left: 10px; top: 10px; 
 
} 
 

 
.high-content { 
 
    height: 100000px; 
 
    background-color: orange; 
 
} 
 

 
.scroll-to { 
 
    position: absolute; 
 
    top: 800px; left: 200px; 
 
    width: 200px; height: 200px; 
 
    border: dashed 5px red; 
 
    font-size: 28px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="show-position">start scrolling</div> 
 
<div class="high-content"></div> 
 
<div class="scroll-to">I'm positioned 800px from top.</div>

Answer 2

Вы можете попытаться поймать событие прокрутки и обновить верхнюю позицию, но вы не можете изменять полосу прокрутки напрямую, потому что элемент отображается операционной системой во многих браузерах, а JavaScript не имеет API для общения с ним - вы можете просто сказать, что вам нужны полосы прокрутки с элементом, а какие (вертикальные, горизонтальные, обе или ни одна), вот и все.

С CSS3, вещи начинают становиться лучше, но только Webkit, кажется, поддерживаются: http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/

Смотрите также:

• https://css-tricks.com/almanac/properties/s/scrollbar/
• https://css-tricks.com/custom-scrollbars-in-webkit/
• http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS