Как создать пользовательские полосы прокрутки с помощью Bootstrap?

Я начал работать над простым веб-приложением, используя Twitter Bootstrap для моего пользовательского интерфейса, и у меня есть div с свойством overflow-y. Я хотел избавиться от панели прокрутки по умолчанию и использовать несколько классных полос прокрутки, используя jquery, например этот пример. Я попробовал предыдущий пример с моим вложенным div, который находится в следующем формате.

<div class="row fill"> <div id="users" class="span3 offset1">  <div id="contentWrapper" class="span7 fill"> <div>Scrollable content here </div>

Но когда я пытаюсь реализовать пользовательскую полосу прокрутки, отображается по умолчанию, и когда я проверял ее с помощью инструментов разработчика, пользовательский компонент располагается где-то в верхней части страницы и не отображается. Есть ли способ начать использование пользовательских полос прокрутки с фиксированной сеткой макета бутстрапа? Есть ли у нас хорошие ресурсы? Я бы очень признателен за вашу помощь в этом.

Думаю, я понял, где может быть проблема. Когда я следовал примеру jquery, упомянутому выше, содержимое div, которое должно было прокручиваться, было изменено во время выполнения и добавлена следующая структура div.

<div class="content mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox" id="mCSB_1">
<div class="mCSB_container mCS_no_scrollbar">
<div class="mCSB_scrollTools"> ....... </div>
</div>
</div></div>

Когда есть данные, уже присутствующие в содержимом div, измененный фрагмент кода содержит его внутри mCSB_container mCS_no_scrollbar, и он отлично работает как показано здесь, Но когда содержимое div динамически добавляется с пользовательским вводом, то во время выполнения текст добавляется к "контенту" вместо div "mCSB_container mCS_no_scrollba". Есть ли способ заставить его работать? Спасибо за вашу помощь.

Ответ 1

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

С учетом этого, я думаю, вам лучше использовать существующее решение вместо того, чтобы пытаться сворачивать свои собственные. Я могу порекомендовать jScrollPane - я просто использовал его для проекта, и его было очень легко добавить - мне пришлось всего 10 минут, и очень легко добавить свой собственный стиль. Обратите особое внимание на раздел "загрузки", но он полагается на пару других скриптов, чтобы заставить вещи, такие как прокрутка мыши, работать правильно.