我在这里看到了一些关于这个主题的帖子，但找不到真正解决我试图处理的问题的帖子。
我的网站上有博客文章页面。我已经设置了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 文件没有被触发。如果我删除脚本，那么什么都不会改变。这可能是我问题的核心？
最佳答案
这是您要找的吗？
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
关于jquery - 修改 InfiniteScroll 使其水平工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17687896/