iPad/touch/swipe with Scroller
iPad/touch/swipe with Scroller
So, I'm using Scroller and I'm on an iPad.. I'd love to use iScroll 4 (http://cubiq.org/iscroll-4) inside the scroller.
I'm digging around seeing what it would entail, but I need to touch/swipe-enable Scroller.
Anyone have any tips?
I'm digging around seeing what it would entail, but I need to touch/swipe-enable Scroller.
Anyone have any tips?
This discussion has been closed.
Replies
It makes me feel dirty hacking stuff like this up, but I really want the smooth acceleration and things that iScroll gives me.
I changed fnScrollToRow and added fnScrollToOffset to the Scroller.js:
[code]
"fnScrollToRow": function (iRow, bAnimate) {
var px = this.fnRowToPixels(iRow);
this.fnScrollToOffset(px, bAnimate);
},
"fnScrollToOffset": function (px, bAnimate) {
if (typeof bAnimate == 'undefined' || bAnimate) {
$(this.dom.scroller).animate({
"scrollTop": px
});
}
else {
$(this.dom.scroller).scrollTop(px);
}
},
[/code]
Then, I have this running this code on the first draw of the table:
[code]
// add an ID to the scroll body so we can pass that to iScroll
var scrollBody = $('div#shoppingCartItemsViewContainer div.dataTables_scrollBody');
scrollBody.attr('id', 'tableContainer');
// calculate a bottom offset to tell iScroll about
var scrollBodyHeight = scrollBody.height();
var tableHeight = (self.getTableElement()).height();
var offsetBottom = tableHeight - scrollBodyHeight;
_debug('debug', 'scroller height = ' + scrollBodyHeight + ', tableHeight = ' + tableHeight + ', calculated offset = ' + offsetBottom);
// wire up an onScrollEnd Event handler for iScroll
var scrollEnd = function () {
var iX = this.x;
var iY = this.y;
_debug('info', 'iScroll.onScrollEnd - iScroll coords = [' + iX + ',' + iY + ']');
// get the scroller control's top position
var scroller = _dataTable.oScroller;
var top = scroller.dom.scroller.scrollTop;
_debug('info', 'oScroller top = [' + top + ']');
// add the iScroll y-offset to it (it's negative, so subtract)
var newTop = top - Math.round(iY);
_debug('info', 'oScroller NEW top = [' + newTop + ']');
// scroll the scroller to the new position and fire the scroll update method
_dataTable.oScroller.fnScrollToOffset(newTop, false);
_dataTable.oScroller._fnScroll();
_debug('info', 'resetting iScroll position to 0,0');
this._pos(0, 0);
};
// init the iScroll
new iScroll('tableContainer', { hScroll: false, offsetBottom: offsetBottom, onScrollEnd: scrollEnd });
[/code]
When we scroll past the bottom, the scroller seems to jump backwards sometimes. I'm not sure if it was meant to scroll like this...
Any thoughts would be appreciated..
T
Allan
Agreed! The new scrolling options in iOS 5 should help with that since it will have momentum support. Until then, I guess it will require some library to integrate with Scroller in order to work as required, which might well involve some digging around in the code.
Allan
Do you have an iPad?
Allan
Allan