4
所以我試圖使用iScroll demo here - Zhuinden帖子。無法滾動到iScroll div的底部
所以我有我的應用程序代碼（這將是一個PhoneGap的移動應用程序） - 滾動工作正常，我的筆記本電腦/臺式機上，但由於某些原因，我不能滾動到div的底部移動（在移動應用程序中）。
下面的代碼：
<script>
function pullDownAction(theScroller) {
var el, li, i;
//TODO: do your things
theScroller.refresh(); //just in case
}
function pullUpAction(theScroller) {
var el, li, i;
//TODO: doYourThings();
theScroller.refresh(); //just in case
}
var IScrollPullUpDown = function(wrapperName, iScrollConfig, pullDownActionHandler, pullUpActionHandler) {
var iScrollConfig, pullDownActionHandler, pullUpActionHandler, pullDownEl, pullDownOffset, pullUpEl, scrollStartPos;
var pullThreshold = 5;
var me = this;
function showPullDownElNow(className) {
// Shows pullDownEl with a given className
pullDownEl.style.transitionDuration = '';
pullDownEl.style.marginTop = '';
pullDownEl.className = 'pullDown ' + className;
}
var hidePullDownEl = function(time, refresh) {
// Hides pullDownEl
pullDownEl.style.transitionDuration = (time > 0 ? time + 'ms' : '');
pullDownEl.style.marginTop = '';
pullDownEl.className = 'pullDown scrolledUp';
// If refresh==true, refresh again after time+10 ms to update iScroll's "scroller.offsetHeight" after the pull-down-bar is really hidden...
// Don't refresh when the user is still dragging, as this will cause the content to jump (i.e. don't refresh while dragging)
if(refresh) setTimeout(function() {
me.myScroll.refresh();
}, time + 10);
}
function init() {
var wrapperObj = document.querySelector('#' + wrapperName);
var scrollerObj = wrapperObj.children[0];
if(pullDownActionHandler) {
// If a pullDownActionHandler-function is supplied, add a pull-down bar at the top and enable pull-down-to-refresh.
// (if pullDownActionHandler==null this iScroll will have no pull-down-functionality)
pullDownEl = document.createElement('div');
pullDownEl.className = 'pullDown scrolledUp';
pullDownEl.innerHTML = '<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>';
scrollerObj.insertBefore(pullDownEl, scrollerObj.firstChild);
pullDownOffset = pullDownEl.offsetHeight;
}
if(pullUpActionHandler) {
// If a pullUpActionHandler-function is supplied, add a pull-up bar in the bottom and enable pull-up-to-load.
// (if pullUpActionHandler==null this iScroll will have no pull-up-functionality)
pullUpEl = document.createElement('div');
pullUpEl.className = 'pullUp';
pullUpEl.innerHTML = '<span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to load more...</span>';
//scrollerObj.appendChild(pullUpEl);
}
me.myScroll = new IScroll(wrapperObj, iScrollConfig);
me.myScroll.on('refresh', function() {
if((pullDownEl) && (pullDownEl.className.match('loading'))) {
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
if(this.y >= 0) {
// The pull-down-bar is fully visible:
// Hide it with a simple 250ms animation
hidePullDownEl(250, true);
} else if(this.y > -pullDownOffset) {
// The pull-down-bar is PARTLY visible:
pullDownEl.style.marginTop = this.y + 'px';
// CSS-trick to force webkit to render/update any CSS-changes immediately: Access the offsetHeight property...
pullDownEl.offsetHeight;
var animTime = (250 * (pullDownOffset + this.y)/pullDownOffset);
this.scrollTo(0, 0, 0);
setTimeout(function() {
hidePullDownEl(animTime, true);
}, 0);
} else {
hidePullDownEl(0, true);
this.scrollBy(0, pullDownOffset, 0);
}
}
if((pullUpEl) && (pullUpEl.className.match('loading'))) {
pullUpEl.className = 'pullUp';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
});
me.myScroll.on('scrollStart', function() {
scrollStartPos = this.y; // Store the scroll starting point to be able to track movement in 'scroll' below
});
me.myScroll.on('scroll', function() {
if(pullDownEl || pullUpEl) {
if((scrollStartPos == 0) && (this.y == 0)) {
this.hasVerticalScroll = true;
// Set scrollStartPos to -1000 to be able to detect this state later...
scrollStartPos = -1000;
} else if((scrollStartPos == -1000) &&
(((!pullUpEl) && (!pullDownEl.className.match('flip')) && (this.y < 0)) ||
((!pullDownEl) && (!pullUpEl.className.match('flip')) && (this.y > 0)))) {
this.hasVerticalScroll = false;
scrollStartPos = 0;
this.scrollBy(0, -this.y, 0); // Adjust scrolling position to undo this "invalid" movement
}
}
if(pullDownEl) {
if(this.y > pullDownOffset + pullThreshold && !pullDownEl.className.match('flip')) {
showPullDownElNow('flip');
this.scrollBy(0, -pullDownOffset, 0); // Adjust scrolling position to match the change in pullDownEl's margin-top
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
} else if(this.y < 0 && pullDownEl.className.match('flip')) { // User changes his mind...
hidePullDownEl(0, false);
this.scrollBy(0, pullDownOffset, 0); // Adjust scrolling position to match the change in pullDownEl's margin-top
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
}
if(pullUpEl) {
if(this.y < (this.maxScrollY - pullThreshold) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'pullUp flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to load more...';
} else if(this.y > (this.maxScrollY + pullThreshold) && pullUpEl.className.match('flip')) {
pullUpEl.className = 'pullUp';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
}
});
me.myScroll.on('scrollEnd', function() {
if((pullDownEl) && (pullDownEl.className.match('flip'))) {
showPullDownElNow('loading');
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownActionHandler(this); // Execute custom function (ajax call?)
}
if((pullUpEl) && (pullUpEl.className.match('flip'))) {
pullUpEl.className = 'pullUp loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpActionHandler(this); // Execute custom function (ajax call?)
}
if(scrollStartPos == -1000) {
this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0;
}
});
me.myScroll.refresh();
}
window.addEventListener('load', function() {
init();
}, false);
};
var scroller1 = new IScrollPullUpDown('messages-wrapper', {
probeType: 2,
bounceTime: 250,
bounceEasing: 'quadratic',
mouseWheel: false,
scrollbars: true,
fadeScrollbars: true,
interactiveScrollbars: false,
click: true,
tap: true
}, pullDownAction, pullUpAction);
function blockTouchMove(e) {
e.preventDefault();
}
document.addEventListener('touchmove', blockTouchMove, false);
</script>
<div id="messages-wrapper"><div id="messages"></div></div>
我沒有看到什麼它可能是。我試過改變滾動距離，我試過選擇禁用部分代碼。我只是不確定究竟是什麼限制了我一直往下滾動，而且似乎沒有其他人有這個特殊問題。
難道是因爲我通過AJAX（我添加消息）更新我的div的大小？如何通過iScroll複製iOS下拉以獲得新的消息功能？
編輯：這是JSFiddle不起作用。我可以做基於對某些事物的變化吧：
和的jsfiddle更接近生產（這是絕對不工作在iOS的11滾動這裏）：
我第一個衝動是，這也許什麼都沒有做與JS本身，而是一些CSS，可以這樣嗎？我怎麼能測試洞的東西？ – Webdesigner
我可以把它折成JSFiddle真快 –
放一個。如果我確定有東西丟失或配置錯誤，我可以進行更改 –