我在这个主题上看到了一些帖子，但是没有找到一个真正解决我正在处理的问题的帖子。
在我的网站上，我有博客文章的页面。我已经设置了无限滚动（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文件没有被触发。如果我删除脚本，那么什么也不会改变。这可能是我的问题的核心吗？