Как сверстать кастомный скроллбар?

Question

[Дмитрий Синельников]

Здравствуйте!
Есть макет https://yadi.sk/i/ATmaws533YhRq4
В нём есть кастомный скролл но он распространяется только на часть без первого блока и футера. Вопрос заключается в том чтобы двигать системный скролл по движению бигунка. Сейчас я использовал плагин для скролла Baron.js но есть проблема в том что из за смены позиционирования скрол начинает работать не коректно.

Comments

[Dymok]

А разве эти страницы не должны быть полноэкранными? Если да, то стоит использовать fullpage.js

[Дмитрий Синельников]

Dymok, Нет, так ка дизайнер как всегда молодец дальше наклипал макетов которые не влазят в один экран, ну и это усложнение которое с кастомным скроллом не работает совсем. Я уже попробовал fullpage.js, проблем ещё больше чем без него.

Answer 1

[profesor08]

Лучше модернизируй стандартный, нежели делать свой.

::-webkit-scrollbar { /* 1 - скроллбар */
    width: 4px;
    height: 4px;
    background-color: #FFFFFF;
  }

  ::-webkit-scrollbar-button { /* 2 - кнопка */

  }

  ::-webkit-scrollbar-track { /* 3 - трек */
  }

  ::-webkit-scrollbar-track-piece { /* 4 - видимая часть трека */
  }

  ::-webkit-scrollbar-thumb { /* 5 - ползунок */
    border-radius: 2px;
    background-color: #d1d1d1;
  }

  ::-webkit-scrollbar-corner { /* 6 - уголок */
  }

  ::-webkit-resizer { /* 7 - изменение размеров */
  }

Еще можешь воспользоваться этим: manos.malihu.gr/jquery-custom-content-scroller

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

Comments

[Дмитрий Синельников]

но не кастомное решение только для webkit + надо чтоб скролл был только со второго экрана. Скорее всего стоит рубить руки дизайнеру.

[profesor08]

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