Собственная полоса прокрутки страницы

Доброго времени суток.
Назрел вопрос как заменить стандартную прокрутку страницы браузера на собственную и что бы она работала в большинстве браузеров.

Альберт Вескер, в примере используется плагин nanoScroller: http://jamesflorentino.github.io/nanoScrollerJS/

Dana Domirani, несколько не разберусь каким образом это установить. Подскажите, пожалуйста.

up

up

Вариант для BB2

1) Скачайте плагин из вложенного здесь файла (в конце этого сообщения). Разархивируйте его, залейте на хостинг, получите прямую ссылку вида

Код:

http://адрес_хостинга/jquery.nanoscroller.js

2) В шаблоне overall_header (Верхняя часть страницы) перед тегом

Код:

</head>

добавьте код добавления плагина

Код:

<script src="http://адрес_хостинга/jquery.nanoscroller.js" type="text/javascript"></script>

Вместо ссылки http://адрес_хостинга/jquery.nanoscroller.js подставьте ссылку на загруженный Вами плагин.



Ниже замените два фрагмента:

Код:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

на

Код:

<div class="nano"><div class="nano-content"><table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

и

Код:

</table>
</body>
</html>
<!-- END html_validation -->

на

Код:

</table></div></div>
</body>
</html>
<!-- END html_validation -->

Сохраните, опубликуйте (!) шаблон.

3) В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, новый скроллер
Расположение: на всех страницах
Код:

Код:

$(function(){

$(".nano").nanoScroller();

});

Сохраните.

4) Добавьте в CSS настройки и измените цвета / закругления по вкусу:

Код:

/* настройки прокрутки nanoScroller */

body {
  margin: 0 !important;
  padding: 0 !important;
}

.nano > .nano-content {
  position: absolute;
  overflow: scroll;
  overflow-x: hidden !important;
  top: 0;
  right: 0 !important;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.nano > .nano-content:focus {
  outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
  visibility: hidden;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
  visibility: visible;
}

/* полоса прокрутки */
.nano > .nano-pane {
  background: rgba(0,0,0,.25); /* цвет фона */
  position: absolute;
  width: 10px; /* ширина */
  right: 0;
  top: 0;
  bottom: 0;
  visibility: hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity: .01; /* по-умолчанию прокрутку не видно  */
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
  -moz-border-radius: 5px; /* закругленные уголки  */
  -webkit-border-radius: 5px; /* закругленные уголки  */
  border-radius: 5px; /* закругленные уголки  */
}

/* бегунок на полосе прокрутки */
.nano > .nano-pane > .nano-slider {
  background: #444; /* цвет бегунка */
  background: rgba(0,0,0,.5); /* цвет бегунка */
  position: relative;
  margin: 0 1px;
  -moz-border-radius: 3px; /* закругленные уголки  */
  -webkit-border-radius: 3px; /* закругленные уголки  */
  border-radius: 3px; /* закругленные уголки  */
}

 /* при наведении полоса прокрутки появляется  */
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
  visibility: visible\9; /* Target only IE7 and IE8 with this hack */
  opacity: 0.99;
}

Вариант для Pun

1) первый пункт такой же

2) В шаблоне overall_header (Верхняя часть страницы) перед тегом

Код:

</head>

добавьте код добавления плагина

Код:

<script src="http://адрес_хостинга/jquery.nanoscroller.js" type="text/javascript"></script>

Вместо ссылки http://адрес_хостинга/jquery.nanoscroller.js подставьте ссылку на загруженный Вами плагин.



Ниже замените два фрагмента:

Код:

<div class="minwidth_IE">

на

Код:

<div class="nano"><div class="nano-content"><div class="minwidth_IE">

и

Код:

            </div>
         </div>
      </div>
   </div>
</body>
</html>
<!-- END html_validation -->

на

Код:

            </div></div></div>
         </div>
      </div>
   </div>
</body>
</html>
<!-- END html_validation -->

Сохраните, опубликуйте (!) шаблон.

3) Третий пункт такой же

4) Четвертый пункт такой же

---

У форумов BB3 и IPB шаблоны нередактируемые, для них вариантов предложить не могу.

---

Dana Domirani, спасибо!