Я вижу несколько сообщений по этой теме, но не мог найти тот, который фактически решает проблему, которую я пытаюсь обработать.
На моем сайте у меня есть страницы сообщений в блогах. У меня есть setup infinScroll (https://github.com/paulirish/infinite-scroll), и он работает правильно для загрузки на следующей странице контента, вызванного действием прокрутки. я установил мой div для прокрутки по горизонтали, но я не могу понять, как изменить бесконечныйScroll script (и local.js script), который будет запускаться с помощью прокрутки горизонтальный, а не вертикальной прокрутки,
вот прогресс: https://adrtimesv6.squarespace.com/library/ (вам нужно ввести код доступа посетителя для просмотра, а im building).
Любая помощь будет принята с благодарностью!! я уже много времени занимаюсь ремеслом и охотой через промежутки времени, пытаясь заставить это работать.
Моя структура html выглядит так:
<div class="listWrapper">
<div id="scroller">
<article class="item"></article>
<article class="item"></article>
... and so on
</div>
</div>
Мой script выглядит следующим образом:
$('#scroller').infinitescroll({
behavior: 'local',
binder: $('#scroller'),
nextSelector: ".pagination .nextPage",
navSelector: ".pagination",
itemSelector: ".item",
animate: false,
extraScrollPx: 0,
bufferPx: 235,
pixelsFromNavToRight: undefined,
});
И я изменил файл js бесконечногоScroll, чтобы изменить все ссылки на высоту по ширине, сверху вниз и снизу вправо:
;
(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 не запускается. если я удалю script, то ничего не изменится. это может быть сердцем моей проблемы?