Как создать пользовательскую полосу прокрутки в div (стиль Facebook)

Question

Интересно, как была сделана пользовательская полоса прокрутки на Facebook?

Это только css или какой-нибудь javascript?

Если да, могу ли я иметь представление о том, как выглядит код?

Этот вопрос относится к стилю полосы прокрутки Facebook, а не к тому, как просто иметь собственную полосу прокрутки

Answer 1

Эта ссылка должна помочь вам начать.Короче говоря, div, стилизованный под полосу прокрутки, используется для перехвата событий click-and-drag.К этим событиям подключены методы, которые прокручивают содержимое другого div, который имеет произвольную высоту и обычно имеет правило css переполнения: scroll (есть варианты в правилах css, но вы понимаете, что это).1004 * Я полностью посвящен опыту обучения, но после того, как вы узнали, как он работает, я рекомендую использовать для этого библиотеку (а их много).Это одна из тех вещей, которые "не изобретать" ...

Answer 2

это сочетание javascript и css

http://jscrollpane.kelvinluck.com/basic.html

Answer 3

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

Не стесняйтесь использовать мой плагин для вашего проекта::)

https://github.com/leoselig/jsFancyScroll/

Я очень рекомендую егоплагины, такие как TinyScrollbar, которые идут с ужасными проблемами производительности!

Answer 4

Если вы ищете полосу прокрутки, похожую на Facebook, то я настоятельно рекомендую вам взглянуть на эту:

http://rocha.la/jQuery-slimScroll

Answer 5

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

Настоящий трюк состоит в том, чтобы иметь следующую структуру:

<div class="window">
 <div class="title">Some title text</div>
 <div class="content">Main content area</div>
 <div class="footer"></div>
</div>

Важные CSS основные моменты:

• Ваш CSS будет определять область содержимого с высотой и переполнением, чтобы разрешить появление полосы прокрутки.
• Класс окна получает те же диаметры углов, что и заголовок и нижний колонтитул
• Тень, при желании, предоставляется только классу окна
• Высота div нижнего колонтитула равна радиусу нижних углов

Вот как это выглядит: