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>我猜这是你的问题，除非你错过了你网页上的额外代码。

需要修复无限滚动

1 个答案: