Diskuze: Automatické posouvání ScrollBaru
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
katrincsak:6.2.2017 18:03
Malý výpis generovaného playlistu skladeb
- Skladeb je samozřejmě více a je potřeba, aby se obsah #scroll posunul. Konkrétně elementy <li> s id=0 až id=X jakmile dohraje skladba.
- Když už jsem provedl hotový script co posouvá scroll o určitý počet pixelů, tak narážím na problém u responsivního webu, že výsledná hodnota je pokaždé jiná a to i za předpokladu, že použiju funkci height() na zjištění velikosti. (Ale na to jsem přišel až dneska.)
- Příkládám i screen jak vypadá přehrávač.
- Přiložil jsem i funkční js kod, který scroll posune, ale narážím zde na problém co jsem vypsal. Např. chrome výšku vypočítá na 64,33px, ale posun se provádí jen v 64px je tedy jasné, že pomalu a jistě to nevychází.
JS
function scrolling(height,ele){
this.stop().animate({ scrollTop: height}, 1000, function () { });
};
function run(height){
var wtf = $('.tab-content');
scrolling.call(wtf,height, this);
}CSS
#scroll{
overflow-y: scroll;
height: 334px;
width: 100%;
}HTML
<div id='scroll' class="tab-content">
<div class="tab-pane active" id="tab1">
<p><div class="playlist">
<ul>
<li id='0' class='jsDeactive' name='0'>
<a href="javascript:loadVideo('0')">
<div class='title'>
<div class='playlist-thumbnail'>
<img id='playlist' src='http://i.ytimg.com/vi/wx1RNRJRG-s/default.jpg'>
</div>
<span class='title'>(1) We Are Loud - Stay High (Ft. Ida)</span>
<div class='playtime'><span>3:45</span></div>
</div>
</a>
</li>
<li id='1' class='jsDeactive' name='0'>
<a href="javascript:loadVideo('0')">
<div class='title'>
<div class='playlist-thumbnail'>
<img id='playlist' src='http://i.ytimg.com/vi/wx1RNRJRG-s/default.jpg'>
</div>
<span class='title'>(2) We Are Loud - Stay High (Ft. Ida)</span>
<div class='playtime'><span>3:45</span></div>
</div>
</a>
</li>
<li id='2' class='jsDeactive' name='0'>
<a href="javascript:loadVideo('0')">
<div class='title'>
<div class='playlist-thumbnail'>
<img id='playlist' src='http://i.ytimg.com/vi/wx1RNRJRG-s/default.jpg'>
</div>
<span class='title'>(3) We Are Loud - Stay High (Ft. Ida)</span>
<div class='playtime'><span>3:45</span></div>
</div>
</a>
</li>
<li id='3' class='jsDeactive' name='0'>
<a href="javascript:loadVideo('0')">
<div class='title'>
<div class='playlist-thumbnail'>
<img id='playlist' src='http://i.ytimg.com/vi/wx1RNRJRG-s/default.jpg'>
</div>
<span class='title'>(4) We Are Loud - Stay High (Ft. Ida)</span>
<div class='playtime'><span>3:45</span></div>
</div>
</a>
</li>
</ul>
</div></p>
</div>
</div>
Neaktivní uživatel:7.2.2017 16:53
Dobre, zda se, ze jsi to popsal dostatecne, zkusim to shrnout:
mas kontejner, ktery obsahuje seznam videi
kontejner ma overflow: scroll - naprosto logicky
kdyz zacne hrat dalsi skladba, chces aby se list skladeb poscrolloval o neco
niz, protoze aktualni skladba ma byt vzdy nahore
problem je:
kdyz vyska elementu jednoho prvku listu neni cele cislo postupem casu se
odchilis pri scrollovani
navrhuju reseni na zaklade pozice video elementu v seznamu a nikoliv jeho rozmeru
tim chci rict, misto toho abys scrolloval na principu krokovani (dalsi skladba -> scroll o fixni vzdalenost) udelas tohle:
zmena skladby -> je treba aktualizovat list -> zjistit jak daleko od horniho leveho rohu se nachazi pozadovana aktualni skladba -> zascrollovat v kontejneru na presne tuto hloubku ...
vlastne jsem ti vsechno potrebne napsal uz v prvnim postu, ale ty pouzivas jQuery a ja to budu respektovat , takze se domnivam ze ti bude stacit tohle http://api.jquery.com/offset/
vyhoda tohohle reseni je asi ta, ze v momente, kdy uzivatel klikne v listu na jakoukoliv skladbu, vyvola to ten samy sled udalosti, tedy vzdy bude mit nahore v seznamu na prvnim miste prave hrajici skladbu..
+20 Zkušeností
+2,50 Kč
Zobrazeno 8 zpráv z 8.