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.

5 komentářů

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?

Jamesentig · 25.6.2019 v 23:46

помощь в получении водительских прав – сколько стоят права, купить права в гаи цена 2018

Napsat komentář

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

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