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
//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
<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.
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.
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:
<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():
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í.