1
那麼主無限滾動工作正常。如果我只爲帖子製作無限滾動,那麼它的工作正常,如果我只爲隨機新聞製作無限滾動(右側欄),它工作正常。但是,如果我做無限滾動兩個,並在單頁上,帖子開始搞亂這樣的:需要修復無限滾動
正如你可以看到帖子後隨機職位那些帖子之後則Ant剛剛出現出現上次隨機帖子。
這是帖子的代碼。
<div class="row">
@foreach($posts as $post)
@if($latest->id != $post->id)
THIS IS WHERE SCROLL BEGINS
<div class="col-xs-6 col-lg-6 scroll">
<a href="/post/{{$post->slug}}/{{$post->id}}">
<img class="img-responsive" style="width: 352px; height: 180px" src="{!! url($post->image) !!}" alt=""></a>
<h3 class="post" style="font-size: 1.4em;">
@foreach($post->category as $cat)
<a style="color: red; text-transform: uppercase; font-size: 13px" href="/categories/{{$cat->name}}">{{$cat->name}}</a>
@endforeach
<br><a class="post" href="/post/{{$post->slug}}/{{$post->id}}">{{strip_tags($post->title)}}</a></h3>
<span style="color: #b8b8b8">Paskelbta {{$post->created_at}}</span>
<br><br>
</div><!--/.col-xs-6.col-lg-4-->
@endif
@endforeach
</div><!--/row-->
{!! $posts->render() !!}
</div><!--/.col-xs-12.col-sm-9-->
THIS IS WHERE I INCLUDE SIDEBAR
@include('comp.sidebar')
</div><!--/row-->
<hr>
INFINITE SCROLL CODE
{!! Html::script('jscroll-master/jquery.jscroll.min.js') !!}
<script type="text/javascript">
$(function() {
$('.scroll').jscroll({
autoTrigger: true,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.scroll',
callback: function() {
$('ul.pagination:visible:first').hide();
}
});
});
</script>
這是右側欄代碼:
<div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" style="padding: 0px">
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="glyphicon glyphicon-paperclip"></i>
<span class="caption-subject text-uppercase"> Atsitiktiniai</span>
<span class="caption-helper">viskas po ranka</span>
</div>
</div>
THIS IS WHERE SCROLL BEGINS
<div class="scroll">
@foreach($randomPosts as $posts)
<img class="popImage" src="{!! url($posts->image) !!}" />
<p><a class="popTitle" href="/post/{{$posts->slug}}/{{$posts->id}}">{{$posts->title}}</a></p><br>
@endforeach
<div style="display: none">{!! $randomPosts->render() !!}</div>
</div>
</div>
</div><!--/.sidebar-offcanvas-->
INFINITE SCROLL CODE
{!! Html::script('jscroll-master/jquery.jscroll.min.js') !!}
<script type="text/javascript">
$(function() {
$('.scroll').jscroll({
autoTrigger: true,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.scroll',
callback: function() {
$('ul.pagination:visible:first').hide();
}
});
});
</script>
你在使用twitter-bootstrap嗎? – divy3993
@ divy3993是的! – feknaz
你住它嗎?如果這樣給我們提供一個鏈接,最好解決你的問題。 – divy3993