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

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

Является ли это только css или javascript?

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

Этот вопрос специфичен для стиля прокрутки Facebook, а не для того, чтобы просто создать пользовательскую полосу прокрутки

Ответы

Ответ 1

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

Я полностью посвящен опыту обучения, но после того, как вы узнали, как он работает, я рекомендую использовать для этого библиотеку (которых их много). Это одна из тех вещей "не изобретать"...

Ответ 3

Facebook использует очень умную технику, описанную мной в контексте моего плагина прокрутки jsFancyScroll:

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

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

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

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

Ответ 4

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

http://rocha.la/jQuery-slimScroll

Ответ 5

Я решил эту проблему, добавив еще один div в качестве сиблинга в прокручивающийся контент 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 будет определять область содержимого с высотой и переполнением, чтобы позволить появляться полосы прокрутки.
  • Класс окна получает те же самые углы диаметра, что и заголовок и нижний колонтитул
  • Теневая тень, если требуется, предоставляется только классу окон
  • Высота нижнего колонтитула совпадает с радиусом нижних углов.

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

Bottom right corner