Jelikož skrze CSS styly jde velmi omezeně, ne-li vůbec v některých prohlížečích, upravovat vzhled rolovací lišty (scrollbaru), tak je potřeba šáhnout k některému vytvořenému skriptu. Na internetu jsem našel hodně hezkých jQuery skriptů, hodně jich však bylo „složité“ implementovat, a nebo mi v konkrétním řešení nefungovaly. Nakonec jsem našel Enscroll customizable jQuery scrollbar. Má 4 různé styly. Já tu předvedu ten podle mě nejvydařenější (ostatní jsou v uvedeném odkazu). Dá se použít jak pro horizontální, tak pro vertikální skrolování. Stačí přidat jedna třída k několika divům a máme několik oken s upraveným skrolováním.

Skript funguje ve Firefoxu, Chrome, Opeře i na telefonech a tabletech.

Nutné je tedy stáhnout samotný skript pro úpravu skrolování a vložit si je na stránky například do složky js.

Stejný styl skrolovací lišty má i Facebook.

Do samotné stránky potom musíme přidat následující kód

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.custom-scrollbar.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $('.scrollbox3').enscroll({ showOnHover: true, verticalTrackClass: 'track3', verticalHandleClass: 'handle3' }); });
</script>

Tím jsme aktivovali jQuery knihovnu a samotný skript pro úpravu posuvné lišty. Nyní ještě musíme do CSS stylů přidat následující kód

.scrollbox3 {
overflow: hidden;
width: 150px;
height:150px;
padding: 0 5px;
}
.track3 {
width: 10px;
background: rgba(0, 0, 0, 0);
margin-right: 2px;
border-radius: 10px;
-webkit-transition: background 250ms linear;
-moz-transition: background 250ms linear;
-o-transition: background 250ms linear;
-ms-transition: background 250ms linear;
transition: background 250ms linear;
}
.track3:hover,
.track3.dragging {
background: #d9d9d9; /* Browsers without rgba support */
background: rgba(0, 0, 0, 0.15);
}
.handle3 {
width: 7px;
right: 0;
background: #999;
background: rgba(0, 0, 0, 0.4);
border-radius: 7px;
-webkit-transition: width 250ms;
-moz-transition: width 250ms;
-o-transition: width 250ms;
-ms-transition: width 250ms;
transition: width 250ms;
}
.track3:hover .handle3,
.track3.dragging .handle3 {
width: 10px;
}

Do samotné HTML stránky potom přidáme jeden nebo více divů s názvem třídy „scrollbox3“ a je hotovo. Název může být i jiný, musíte však potom změnit tento název jak v CSS, tak ve funkci $(‚.scrollbox3‘).enscroll(); a samozřejmě v dokumentu HTML.

Demo

Skrolovací DIV s názvem třídy „scrollbox3“. Pokud by byl obsah tohoto bloku menší než obsah, který se vleze do zvolené výšky a šířky, tak by se skrolovací lišta ani neobjevila (viz. vpravo). Lišta se objeví jen tehdy, když musí, a až po najetí myši na tento DIV. Po odjetí myši skrolovací lišta zase sama zmizí.

Demo 2

Další DIV s názvem třídy „scrollbox3“. Ukázka toho, že skript funguje pro několik DIVů zaráz. Zase se bude rolovat. Nemusí se vymýšlet žádné nové třídy nebo ID. Je zde však málo textu k zobrazení lišty (viz. vlevo).

Tip 1

Pokud máte nadřazený DIV, možná mu do CSS stylů budete muset připsat následující kód, aby fungoval, tak jak má
overflow: hidden;

Tip 2

Pokud byste chtěli u DIVů použít ID, pak můžete. Avšak musíte změnit i lehce javascript. Místo tečky v „$(‚.scrollbox3‘).enscroll“ jednoduše přepíšete tuto tečku na křížek (#) s danou ID „$(‚#scrollbox3‘).enscroll“

Kategorie: Poznámky

sarcasm

Pokud zločinci doufají, že zvítězí pravda a láska, pak já doufám, že zvítězí lež a nenávist. Nesnáším duhu, štěňátka, národní hymnu, životní prostředí a svobodu.

4 komentáře

wik · 2.5.2014 v 22:27

nefunkční

    admin · 5.5.2014 v 21:19

    Vždyť demo funguje 😉

Krollik · 10.11.2014 v 17:55

Ahoj, ten skript mi rozhází předchozí formátování toho divu ke kterému to chci přiřadit, jak se toho zbavím?

    admin · 30.11.2014 v 11:35

    Ahoj, jak přesně ti to rozhází? Máš někde adresu na stránky?

Napsat komentář

Vaše emailová adresa nebude zveřejněna.

This site uses Akismet to reduce spam. Learn how your comment data is processed.