11.09.2016 Three.js / WebGL - прозрачная плоскость перекрывает пересекающиеся с ней элемнеты 17.03.2011 Кроссбраузерный js placeholder 22.03.2011 JS scrollbar, стилизация скроллбара 01.03.2011 Вертикально раскрывающееся меню на JS СКАЧАТЬ (SD MENU V)
#76

JS scrollbar, стилизация скроллбара

Жутко не люблю JS, но без него порой никуда, т.к. не всегда есть изящные решения базирующиеся исключительно на css и html.

Не так давно понадобилось мне придать скроллбару не стандартный вид, изменять дизайн скроллбара браузера - это бред полный на мой взгляд, а вот когда нужно подобное сделать для контейнера div, который является частью сайта, то зачастую это уже становится отнюдь не бредом, т.к. стандартный скроллбар отрисованный браузером портит дизайн сайта. 

Ни для кого не секрет, что с помощью css можно задать цвет скроллбара для браузеров Opera и IE начиная с версии 5. А другие браузеры эти свойства просто не поддерживают, т.к. они не соответсвутют W3C стандартам на данный момент.

И тут для изменения дизайна скроллбара на помощь приходит JS. На данный момент решений, которые справляются с подобной задачей достаточно много, но мне больше всех понравился fleXcroll, the scroll bar customize script проекта HESIDO.

Скрипт является бесплатным для некоммерческого использования, а при использование скрипта на коммерческих сайтах придется заплатить 30$ за размещение скрипта на одном сайте или 70$ за неограниченное использование скрипта.

Больше всего из предложенных версий мне понравился минималистичный вариант скролла, который и прикладываю в архиве:

Следует отметить, что при использование свойств float для div контейнеров внутри скролла, высота скролла задается, как высота последнего контейнера в коде, что затрудняет использование скрипта, я вылечил это тем, что поместил float div`ы в таблицу:

  1. <table><tr><td>
  2. <div class="float1"></div>
  3. <div class="float2"></div>
  4. </td></tr></table>

К достоинствам скрипта можно отнести, то что с отключенным JS, скроллбар отрисовывается браузером, что сохраняет функционал сайта.


О сайте