Как создать пользовательскую полосу прокрутки для прокрутки документа по вертикали?

Question

У меня заканчиваются идеи здесь. Я пытаюсь сделать панель прокрутки для управления слайдом всего документа. Как вы можете видеть на моем Jsfiddle, я экспериментировал, но не мог заставить его работать. Вот разметка и css. Вы можете увидеть более сложную версию по ссылке внизу. Любая помощь приветствуется.

HTML

<div id="sidescroll"> 
    <div id="sidescrollbtn"></div> 
</div> 

CSS

#sidescroll{height:80px;width:10px;background:grey;border:1px solid black;margin:0 auto;} 
#sidescrollbtn{height:10px;width:10px;background:red;margin-top:10px;} 

http://jsfiddle.net/vinicius5581/33fx6dpr/

Answer 1

Вот обновленный скрипку, затрагивающим несколько вопросов от комментариев.

Во-первых, вот скрипку ссылка: http://jsfiddle.net/dLbbntwz/

Одна из вещей, которые я хотел сделать, было убирать код и уменьшить дублирование в отдельных обработчиков событий up/down из ранее. Вместо этого у меня есть одна функция _scroller, которая затем передает 1/-1 в фактическую логику _scroll.

Кроме того, была добавлена ​​демонстрация логики колеса мыши. Так что теперь он синхронизируется!

Было, как вы упомянули, уродливой ошибкой, если бы вы нажали вниз, а затем переместили курсор с кнопок. Это связано с тем, что интервал не очищается. Я упомянул в другом комментарии, что вы можете установить флаг и проверить на уровне документа (позволяя пользователю перемещать курсор с кнопок - что кажется более «правильным» для MouseEvents). Я обновил скрипт, чтобы использовать эту логику. Чувствует себя намного лучше?

Кроме того, была небольшая проблема с percentualOffset. Хотя он правильно рассчитал коэффициент, он не учитывал высоту полосы прокрутки (заставляя кнопку прокрутки идти дальше бара). Я обновил это, так что это более точно.

Была также небольшая проблема с логикой для изменения размера кнопки. Если высота документа больше, чем высота прокрутки документа (без полосы прокрутки), все ломается. Итак, эта логика также была очищена.

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

Надеюсь, это поможет! Еще одна область, которую я вижу, вы можете исследовать, это возможность щелкнуть и перетащить кнопку прокрутки, чтобы прокрутить фактическую страницу - это было бы пятно!