Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Automatické posouvání ScrollBaru

Aktivity
Avatar
katrincsak
Člen
Avatar
katrincsak:5.2.2017 0:52

Zdravím,

nejsem v js až tolik znalý i když si pár základních procesů udělám sám, ale s tímto si nevím rady.

Vytvářím vlastní youtube přehrávač s vlastním dynamickým playlistem a potřebuji posunout scrollbar. Identifikování aktuálně přehrávané skladby není problém a tedy ani provedení nutného procesu v pravý čas.

Aktuálně používám metodu tagování a to tím způsobem, že posunu stránku na scrollbar "/#playlist" tím dojde k posunutí a zpětně to vracím na přehrávač "/#prehravac". Jenže, když chcete číst třeba článek a ona se přepne skladba, tak to není moc žádoucí. Potřebuji tedy nějaký efektivnější způsob co posune scrollbar v tichosti.

Playlist je kompletně načtený a tak není nutné zpětně komunikovat se serverem, ale jde jen o posunutí scrollbaru.

Používám funkci: scrollIntoView();

Příklad:
Chci aby se u každého druhého playlistu posunul scrollbar. (Divy jsem zjednodušil)..

<div id='playlist' name='playlist_1'></div>
<div id='playlist' name='playlist_2'></div>
<div id='playlist' name='playlist_3'></div>
<div id='playlist' name='playlist_4'></div>
<div id='playlist' name='playlist_5'></div>
<div id='playlist' name='playlist_6'></div>

Snad jsem to napsal srozumitelně a předem moc děkuji.

 
Odpovědět
5.2.2017 0:52
Avatar
Odpovídá na katrincsak
Neaktivní uživatel:5.2.2017 15:12

Zni to jako bys mel v tech elementech scrollbary a potreboval v nich sem tam zascrollovat, pak se ti asi bude hodit tohle: (pokud jde o vertikalni scrollovani)
https://developer.mozilla.org/…nt/scrollTop
mozna taky tohle:
https://developer.mozilla.org/…nt/offsetTop

mozna bych to pochopil lip, kdyby tenhle text:

Aktuálně používám metodu tagování a to tím způsobem, že posunu stránku na scrollbar "/#playlist" tím dojde k posunutí a zpětně to vracím na přehrávač "/#prehravac". Jenže, když chcete číst třeba článek a ona se přepne skladba, tak to není moc žádoucí. Potřebuji tedy nějaký efektivnější způsob co posune scrollbar v tichosti.

daval lepsi smysl, posunes stranku na kotvu #playlist?? predpokladam, metoda tagovani??, zminka o cteni clanku a prepinani skladby - netusim jak to spolu souvisi.

tak to zkus kdyztak upresnit.

Nahoru Odpovědět
5.2.2017 15:12
Neaktivní uživatelský účet
Avatar
katrincsak
Člen
Avatar
Odpovídá na Neaktivní uživatel
katrincsak:6.2.2017 12:51

Již jsem to udělal za pomocí funkce scrollTop a posouvám scrollBar přidanou hodnotou. Ale stále to není úplně ideální a raději bych to posouval podle divu.

A ano napsal jsem, že používám metodu tagování, která není úplně ideální.

Věděl by jsi jak to udělat na div?

 
Nahoru Odpovědět
6.2.2017 12:51
Avatar
Odpovídá na katrincsak
Neaktivní uživatel:6.2.2017 17:13

Muzu se jen zeptat, co presne si predstavujes pod "a raději bych to posouval podle divu" - mam to chapat, tak, ze rekneme mas kontejner, v nem kdesi vysi div element s id='chytme' a ty bys rad zascrolloval presne tak, aby horni roh elementu chytme byl v hornim roku obrazovky?

Ja vim, ze jsi napsal, ze pouzivas metodu tagovani, ale co je metoda tagovani? Muzes mi to nejak priblizit? Pravdepodobne to budu znat pod jinym nazvem.

Jiste jsem schopnej ti vymyslet reseni na miru, ale to bych potreboval opravdu presne popsat jak stranka vypada a jak se ma podle tvych pozadavku to scrollovani chovat. Takhle jen hadam, ani jsi mi nepopsal, jestli je scrollovaci element na strance jedinej, nebo jich je tam vic, jestli scrollujes cely window, nebo nejaky kontejnery? To vsechno si jen muzu domyslet a hadat.

Nahoru Odpovědět
6.2.2017 17:13
Neaktivní uživatelský účet
Avatar
neutr
Člen
Avatar
neutr:6.2.2017 17:44

Nejde Ti náhodou o zobrazení ProgressBaru, nebo chceš scrolovat texty (noty, akordy) z té muziky? Nebo jde o pozicování ze selectu?

 
Nahoru Odpovědět
6.2.2017 17:44
Avatar
katrincsak
Člen
Avatar
Odpovídá na Neaktivní uživatel
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>
 
Nahoru Odpovědět
6.2.2017 18:03
Avatar
Odpovídá na katrincsak
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..

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
7.2.2017 16:53
Neaktivní uživatelský účet
Avatar
katrincsak
Člen
Avatar
Odpovídá na Neaktivní uživatel
katrincsak:9.2.2017 15:42

Tak já ti moc děkuji za vodítko, které jsi mi dal a již jsem to dal do kupy. Odečtu 1 rozměr od druhého a získám tak reálný a správný rozměr. Díky tomu jsem dosáhl i toho, že si to posunu o tolik skladeb o kolik chci.

var offset_a = $('#'+indexMinus).offset().top - $(".playlist").offset().top;
 
Nahoru Odpovědět
9.2.2017 15:42
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.