Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: Wangarad 28. 05. 2019, 11:26:06

Název: Javascript autoscroll pre div
Přispěvatel: Wangarad 28. 05. 2019, 11:26:06

Dobry den.
Potreboval by som poradit ako spravit autoscroll len pre div.Teda aby sa obsah pohyboval hore a dole dookola.
Nemam vsak az take skusenosti tak by som sa rad poradil, resp. budem vdacny aj za omacku "je to preto lebo". V kode mam toto

Kód: [Vybrat]

//scroll to bottom
setInterval(function(){

    //time to scroll to bottom
    $("html, body").animate({ scrollTop: $(document).height() }, 1000);

    //scroll to top
    setTimeout(function() {
       $('html, body').animate({scrollTop:0}, 8000);
    },2000);//call every 2000 miliseconds

},500);v html

Kód: [Vybrat]

    <ul class="list-group list-group-flush">
                            @foreach($games as $game)
                                <li class="list-group-item d-md-flex justify-content-between align-items-center">
                                    <div>
                                        <h5>{{ __('app.game_' . class_basename(get_class($game->gameable))) }}</h5>
                                        <p class="card-text mb-1">{{ $game->gameable->result }}</p>
                                        <p class="card-text">
                                            <small class="text-muted">
                                                {{ __('Played by') }}
                                                <a href="{{ route('frontend.users.show', $game->account->user) }}">{{ $game->account->user->name }}</a>
                                                {{ $game->created_at->diffForHumans() }}
                                            </small>
                                        </p>
                                    </div>
                                    <div class="mt-2 mt-md-0">
                                        <span class="badge badge-primary badge-pill p-2">
                                            {{ __('Bet :x', ['x' => $game->_bet]) }}
                                        </span>
                                        <span class="badge badge-primary badge-pill p-2">
                                            {{ __('Win :x', ['x' => $game->_win]) }}
                                        </span>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
Skusal som modifikovat script tak ze som namiesto body volal list-group-item d-md-flex justify-content-between align-items-center ale popravde to bola chyba a netusim uplne ako s tym pohnut.

Název: Re:Javascript autoscroll pre div
Přispěvatel: hechj 29. 05. 2019, 22:44:45

Já myslím, že scrolovat můžeš obsahem, nehýbeš samotným prvkem. Takže tomu div elementu dej do stylu overflow: scroll; height:100px a zkus to znovu. Nastav tu akci na div. Bude to scrolovat, pokud bude obsah divu větší než samotný div (po straně bude scrollbar). Nebo nebude, střílím od boku.

Název: Re:Javascript autoscroll pre div
Přispěvatel: k1k1n 30. 05. 2019, 09:04:00

aby obsah nečeho mohl scrollovat, musí to něco mít nastavenou pevnou výšku a nesmí to mít povolené přetékání obsahu (overflow, auto a scroll zobrazí scrollovací lišty, hidden nezobrazí nic, jen skryje přetékající obsah), takže třeba něco takového:

Kód: [Vybrat]

<div style="height:106px;width:200px;border:1px solid black;overflow:hidden;" class="scroll">
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
This is a paragraph.<br>
</div>

a na ten návrat na začátek je lepší využít funkci onComplete v jquery animate():

Kód: [Vybrat]

function startAnim()
{
  var h = $(".scroll").prop("scrollHeight") - $(".scroll").innerHeight();
  $(".scroll").animate({scrollTop:h}, 3000, "linear", function(){
     $(".scroll").scrollTop(0);
     startAnim();
  });
}

tenhle přístup má ale nevýhodu v tom, že je potřeba aby obalující div měl rozměr přesně odpovídající určitému počtu vnitřních prvků (proto tam mám výšku 106px, odpovídá to přesně 6 řádkům v mém stylesheetu), jinak bude patrné přeskakování.