jquery - 修改 InfiniteScroll 使其水平工作

Question

我在这里看到了一些关于这个主题的帖子，但找不到真正解决我试图处理的问题的帖子。

我的网站上有博客文章页面。我已经设置了InfiniteScroll(https://github.com/paulirish/infinite-scroll)并且它可以正常加载由滚动操作触发的下一页内容。我已将 div 设置为水平滚动，但我无法弄清楚如何修改通过水平滚动而不是垂直滚动触发的InfiniteScroll 脚本(和 local.js 脚本)。

这是进度:https://adrtimesv6.squarespace.com/library/ (您必须输入访客访问验证码才能在构建时查看)。

任何帮助将不胜感激!几天来我一直在互联网上修补和寻找，试图让它发挥作用......

我的 html 结构如下:

<div class="listWrapper">
    <div id="scroller">
        <article class="item"></article>
        <article class="item"></article>
        ... and so on
    </div>
</div>

我的脚本如下所示:

$('#scroller').infinitescroll({
    behavior: 'local',
    binder: $('#scroller'),
    nextSelector: ".pagination .nextPage",
    navSelector: ".pagination",
    itemSelector: ".item",
    animate: false,
    extraScrollPx: 0,
    bufferPx: 235,
    pixelsFromNavToRight: undefined,
});

我修改了infiniteScroll js文件，将所有高度引用更改为宽度，从上到左，从下到右:

;
(function ($) {
    $.fn.infinitescroll = function (options, callback) {
        function debug() {
            if (opts.debug) {
                window.console && console.log.call(console, arguments)
            }
        }

        function areSelectorsValid(opts) {
            for (var key in opts) {
                if (key.indexOf && key.indexOf('Selector') > -1 && $(opts[key]).length === 0) {
                    debug('Your ' + key + ' found no elements.');
                    return false;
                }
                return true;
            }
        }

        function determinePath(path) {
            path.match(relurl) ? path.match(relurl)[2] : path;
            if (path.match(/^(.*?)\b2\b(.*?$)/)) {
                path = path.match(/^(.*?)\b2\b(.*?$)/).slice(1);
            } else
            if (path.match(/^(.*?)2(.*?$)/)) {
                if (path.match(/^(.*?page=)2(\/.*|$)/)) {
                    path = path.match(/^(.*?page=)2(\/.*|$)/).slice(1);
                    return path;
                }
                debug('Trying backup next selector parse technique. Treacherous waters here, matey.');
                path = path.match(/^(.*?)2(.*?$)/).slice(1);
            } else {
                if (path.match(/^(.*?page=)1(\/.*|$)/)) {
                    path = path.match(/^(.*?page=)1(\/.*|$)/).slice(1);
                    return path;
                }
                debug('Sorry, we couldn\'t parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.');
                props.isInvalidPage = true;
            }
            return path;
        }

        function getDocumentWidth() {
            return opts.localMode ? ($(props.container)[0].scrollWidth && $(props.container)[0].scrollWidth) : $(document).width()
        }

        function isNearRight() {
            var pixelsFromWindowRightToRight = 0 +
                getDocumentWidth() - (opts.localMode ? $(props.container).scrollLeft() : ($(props.container).scrollLeft() || $(props.container.ownerDocument.body).scrollLeft())) - $(opts.localMode ? props.container : window).width();
            debug('math:', pixelsFromWindowRightToRight, props.pixelsFromNavToRight);
            return (pixelsFromWindowRightToRight - opts.bufferPx < props.pixelsFromNavToRight);
        }

        function showDoneMsg() {
            props.loadingMsg.find('img').hide().parent().find('div').html(opts.donetext).animate({
                opacity: 1
            }, 2000).fadeOut('normal');
            opts.errorCallback();
        }

        function infscrSetup() {
            if (props.isDuringAjax || props.isInvalidPage || props.isDone) return;
            if (!isNearRight(opts, props)) return;
            $(document).trigger('retrieve.infscr');
        }

        function kickOffAjax() {
            props.isDuringAjax = true;
            props.loadingMsg.appendTo(opts.contentSelector).show();
            $(opts.navSelector).hide();
            props.currPage++;
            debug('heading into ajax', path);
            box = $(opts.contentSelector).is('table') ? $('<tbody/>') : $('<div/>');
            frag = document.createDocumentFragment();
            box.load(path.join(props.currPage) + ' ' + opts.itemSelector, null, loadCallback);
        }

        function loadCallback() {
            if (props.isDone) {
                showDoneMsg();
                return false;
            } else {
                var children = box.children().get();
                if (children.length == 0) {
                    return $.event.trigger("ajaxError", [{
                        status: 404
                    }]);
                }
                while (box[0].firstChild) {
                    frag.appendChild(box[0].firstChild);
                }
                $(opts.contentSelector)[0].appendChild(frag);
                props.loadingMsg.fadeOut('normal');
                if (opts.animate) {
                    var scrollTo = $(".listWrapper").scrollLeft() + $('#infscr-loading').width() + opts.extraScrollPx + 'px';
                    $(".listWrapper").animate({
                        scrollLeft: scrollTo
                    }, 800, function () {
                        props.isDuringAjax = false;
                    });
                }
                callback.call($(opts.contentSelector)[0], children);
                if (!opts.animate) props.isDuringAjax = false;
            }
        }
        $.browser.ie6 = $.browser.msie && $.browser.version < 7;
        var opts = $.extend({}, $.infinitescroll.defaults, options),
            props = $.infinitescroll,
            box, frag;
        callback = callback || function () {};
        if (!areSelectorsValid(opts)) {
            return false;
        }
        props.container = opts.localMode ? this : document.documentElement;
        opts.contentSelector = opts.contentSelector || this;
        var relurl = /(.*?\/\/).*?(\/.*)/,
            path = $(opts.nextSelector).attr('href');
        if (!path) {
            debug('Navigation selector not found');
            return;
        }
        path = determinePath(path);
        if (opts.localMode) $(props.container)[0].scrollLeft = 0;
        props.pixelsFromNavToRight = getDocumentWidth() +
            (props.container == document.documentElement ? 0 : $(props.container).offset().left) -
            $(opts.navSelector).offset().left;
        props.loadingMsg = $('<div id="infscr-loading" style="text-align: center;"><img alt="Loading" src="' +
            opts.loadingImg + '" /><div>' + opts.loadingText + '</div></div>');
        (new Image()).src = opts.loadingImg;
        $(document).ajaxError(function (e, xhr, opt) {
            debug('Page not found. Self-destructing...');
            if (xhr.status == 404) {
                showDoneMsg();
                props.isDone = true;
                $(opts.localMode ? this : window).unbind('scroll.infscr');
            }
        });
        $(opts.localMode ? this : window).bind('scroll.infscr', infscrSetup).trigger('scroll.infscr');
        $(document).bind('retrieve.infscr', kickOffAjax);
        return this;
    }
    $.infinitescroll = {
        defaults: {
            debug: false,
            preload: false,
            nextSelector: "div.navigation a:first",
            loadingImg: "http://www.infinite-scroll.com/loading.gif",
            loadingText: "<em>Loading</em>",
            donetext: "<em>Congratulations, you've reached the end.</em>",
            navSelector: "div.navigation",
            contentSelector: null,
            extraScrollPx: 150,
            itemSelector: "div.post",
            animate: false,
            localMode: false,
            bufferPx: 40,
            errorCallback: function () {}
        },
        loadingImg: undefined,
        loadingMsg: undefined,
        container: undefined,
        currPage: 1,
        currDOMChunk: null,
        isDuringAjax: false,
        isInvalidPage: false,
        isDone: false
    };
})(jQuery);

我还切换了 local.js 文件中的所有顶部、左侧、右侧、底部引用:

// Calculate internal width (used for local horizontal scroll)
function infsrc_local_hiddenWidth(element) {
   var width = 0;
   jQuery(element).children().each(function() {
     width = width + jQuery(this).outerWidth(false);
   });
   return width;
}

jQuery.extend(jQuery.infinitescroll.prototype,{
   _nearright_local: function infscr_nearright_local() {
       var opts = this.options, instance = this,
           pixelsFromWindowRightToRight = infsrc_local_hiddenWidth(opts.binder)
               - jQuery(opts.binder).scrollLeft() - jQuery(opts.binder).width();

       if (opts.local_pixelsFromNavToRight == undefined){
           opts.local_pixelsFromNavToRight = infsrc_local_hiddenWidth(opts.binder) +
         jQuery(opts.binder).offset().left - jQuery(opts.navSelector).offset().left;
       }
       instance._debug('local math:', pixelsFromWindowRightToRight,
opts.local_pixelsFromNavToRight);

       return (pixelsFromWindowRightToRight - opts.bufferPx < opts.local_pixelsFromNavToRight);
   }
});

更新**似乎它几乎都工作正常，但还存在一些小故障:-- 内容已加载，内容加载到的元素正在水平滚动，但是加载似乎仍然是由垂直滚动触发的，而不是像我需要的那样由水平滚动触发。-- 似乎 local.js 文件没有被触发。如果我删除脚本，那么什么都不会改变。这可能是我问题的核心？

Answer 1

这是您要找的吗？

var scrollp = Math.ceil( $('body').width() / 20 );
$('body').mousewheel(function(event, delta) {
    if (delta < 0) {
        $('body').scrollTo('+='+scrollp, 50, {easing:'easeInOutSine', queue:false, axis:'x'});
    } else {
        $('body').scrollTo('-='+scrollp , 50, {easing:'easeInOutSine', queue:false, axis:'x'} );
        event.preventDefault();
    }
});

http://jsfiddle.net/jonnysooter/RHKyP/18/

编辑

如果这种“跳回开头”不是您想要的，那么只需稍微修改一下代码，以便在滚动达到全宽度时开始在此回调中加载您的内容。当您的内容加载时，div 宽度将增加，滚动也会随之增加。

这个问题可能会揭示另一种方法。 horizontal infinite scroll