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文件中的所有top，left，right，bottom引用：

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

修改InfiniteScroll以水平工作

1 个答案: