需要修复无限滚动

Question

嗯，主要的无限滚动工作正常。如果我只为帖子进行无限滚动，那么它工作正常，如果我只为随机新闻（右侧边栏）进行无限滚动，它工作正常。但是，如果我在单个页面中都进行无限滚动，则帖子开始像这样混乱：

如您所见，帖子仅出现在随机帖子之后，然后在这些帖子出现最后一个随机帖子之后。

这是帖子的代码。

<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>

Answer 1

在您的主体中，您有太多 </div>'s 我猜这是您的问题，除非您错过了页面中的额外代码。