基本的に、アイテムの数がスクロールサイズで均等に分割されていない場合に、最後のアイテムを超えてスクロールするというScrollableの奇妙な習慣を修正しようとしています。
つまり、11個のアイテムを含むウィジェットがあり、一度に2個表示するように設定されていて、次のボタンをクリックして次の2個のアイテムにスクロールするたびに、11個目のアイテムになるとスクロールして11番目のディスプレイですが、右側に12番目のアイテムがある場所に空きスペースがあります。2番目のアイテムがないにもかかわらず、基本的に次の2つをビューにスクロールします
ここに私の修正を示すjsFiddleがあります:http://jsfiddle.net/natepers/6kmuE/21/
;scroll-size
より少ない残りのアイテム数にリセットすることで、最後のアイテムで停止させることができました。scroll-size
問題は、最初のアイテムに戻れないことです。
これがjavascriptです:
var scrollable = $(".scrollable").data("scrollable");
var size = scrollable.getConf().size;
// Catch any requests for items at the end of the list
scrollable.onSeek(function(event, index) {
var self_size = this.getSize();
// Last vsisible item
var last = index + size;
// How many to the last item
var difference = self_size - last;
// How many more than the scroll size
var remainder = index%size;
//reset scroll size for each request
scrollable.getConf().size = size;
// If next request has items but less than the scroll size
if ( remainder == 0 && difference < size && difference > 0 ) {
// Set the scroll size to th enumber of items left
scrollable.getConf().size = difference;
}
//If we're at the end
if (index++ === self_size - size) {
// Set disabled style on next button
$("a.next").addClass("disabled");
}
//If the items are not evenly divided by the scroll size we know we're at the end
if (remainder != 0) {
// Set scroll size to the what's left
scrollable.getConf().size = remainder;
}
});
// Stop scrolling at last item
scrollable.onBeforeSeek(function(event, index) {
var self_index = this.getIndex();
var self_size = this.getSize();
var last = self_index + size;
//If the last visible item is the last item
if (last == self_size) {
// If the next requested item is >= the last item do nothing
if (index > self_index) { return false; }
}
});
提案や助けをありがとう。