このトピックに関するいくつかの投稿がここにありますが、処理しようとしている問題を実際に解決する投稿を見つけることができませんでした。
私のサイトには、ブログ投稿のページがあります。私は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 ファイルがトリガーされていないようです。スクリプトを削除しても何も変わりません。これが私の問題の核心かもしれませんか？