wp的瀑布流插件infinite-scroll对于navSelector非最底元素(或叫到底距离不固定情形)存在bug

最新推荐文章于 2022-10-20 11:26:30 发布

qidizi

最新推荐文章于 2022-10-20 11:26:30 发布

阅读量2.4k

点赞数

分类专栏： i 例子用法参数

本文链接：https://blog.csdn.net/qidizi/article/details/8732550

版权

i 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

例子

1 篇文章 0 订阅

订阅专栏

用法

1 篇文章 0 订阅

订阅专栏

网址
+ https://github.com/paulirish/infinite-scroll

版本
+ version 2.0b2.120519

本人电脑英语阅读能力还行,但是写能力很差,折腾了很大一会,估计能反馈清楚了吧.

主要原因是作者在写时,未考虑此情况,估计绝大人设计的网页都是瀑布流对象总是最底的,

而我们公司设计的东西,竟然出现了中间瀑布流内容比二边内凹进去了,才发现了此情况.

且插件版本维护存在问题,各个地方的版本不相同,且各个版本使用方法差别很大,

开始不清楚这个情况,拿着旧版本代码,使用着新版本的用法,弄了好大一会,竟然有问题,

且doc文档竟然等于无,估计作者认为东西太简单了,不值得写.

不得已,全盘看过js实现.才发现版本对不上用法,

只有git上是最新版本,

作者在实现时,把nav到底高度总是死的,所以才会出现问题,

导致变的nav会出现一滚动就会加载下页的问题出现.

不修改原代码的简单修改方式如下,估计后期作者会修正.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.b_liBox{border:1px solid red;height:500px;margin-top:50px;}
.center,.left,.right{width:10px;overflow:hidden;float:left; background-color:blue; border:1px solid black;padding:10px;margin:5px;}
.left,.right{height:2000px;}
</style>
</head>

<body>
<div class="left"></div>

<div class="center">
    <div id="scrollFloatBox">
        <div class="b_liBox" id="newLoadDiv"></div>
    </div>
    <div id="over2load"><a href="#">下页</a></div>
</div>

<script src="jquery.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>

<script>
$(function(){
    $.extend($.infinitescroll.prototype,{
        _nearbottom_qidizi: function() {
            var opts = this.options;
            var navBH = $(document).height() - $(opts.navSelector).parent().offset().top;//下页top到底
            var sclBH = 0 + $(document).height() - (opts.binder.scrollTop()) - $(window).height();//滚动底到底
            return sclBH - opts.bufferPx < navBH;
        }
    });
    $('#scrollFloatBox').infinitescroll({
        loading: {
            finishedMsg: "<em>加载完成</em>",
            img: "http://icon.chinahrd.net/image/ajax_load.gif",
            msgText: "<em>正在加载更多内容...</em>",
        },
       behavior:'qidizi',
        contentSelector : '#scrollFloatBox', //append内容对象
        debug: true,
        binder: $(window), // 滚动条触发加载的对象
        nextSelector: "#over2load a:first", //下页对象必须是一个有href的a,只用于取path,置于navSelector内
        navSelector: "#over2load a:first", //当前浏览器可见底线处于它offettop 与它的 bufferPx之间区域就开始加载新内容,置contentSelector外
        itemSelector: "#newLoadDiv", //注意是要加载内容进行筛选,只加载ajax返回的html中$(itemSelector)内容,contentSelector中也必须有
        animate: 0, //是否加载完成就滚动到新内容处
        pathParse: function(path, page){
            return function(curPage) {
                return '?page=' +curPage+  '&r=' +new Date().getTime();
            };
        },
        errorCallback:function(){ alert('加载失败') }, //404之类
        dataType: 'html+callback', //跨域ajax
        prefill: 0, //resize触发内置重画方法
        maxPage:50000 //最多加载次数,
    }, function(box, opts){//加载完成时触发
    });
});
</script>
</body>
</html>

qidizi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wp的瀑布流插件infinite-scroll对于navSelector非最底元素(或叫到底距离不固定情形)存在bug

网址 + https://github.com/paulirish/infinite-scroll版本 + version 2.0b2.120519本人电脑英语阅读能力还行,但是写能力很差,折腾了很大一会,估计能反馈清楚了吧.主要原因是作者在写时,未考虑此情况,估计绝大人设计的网页都是瀑布流对象总是最底的,而我们公司设计的东西,竟然出现了中间瀑布流内容比二边内凹进去了,才发现了此情况.且插
复制链接

扫一扫