edit parameters of iscroll4 given at the time of initialisation

Question

I am trying to use iscroll4 in my IOS app development with cordova 2.1.0.

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
    setTimeout(function () {
        myScroll = new iScroll('wrapper');
    }, 100);
}
window.addEventListener('load', loaded, false);
</script>

If i want to edit the parameters like vScroll , vScrollBar,fixedScrollbar etc. dynamically ie. after the initialisation of iscroll(myScroll = new iScroll('wrapper');), how can i do it in javascript. Thanks in advance.

Why do you want to manipulate iScroll after - not during - the initialization? I think that would require .destroy()ing the iScroll and then re-initializing it. — Samuli Hakoniemi, Oct 15 '12 at 10:07
correct..I wanted to destroy the scroll and then create a new one. How can i do it..? — clint, Oct 15 '12 at 11:14

score 0 · Answer 1 · answered Oct 16 '12 at 09:12

I wouldn't try to look for an 'works in every situation'-solution.

I would:

Sum up the particular options you would want to modify.
See which of these options matter during initialitation
programmatically (manually) change these options
options that only matter at runtime (i.e. are read when an event occurs), I'd simply try to modify the myScroller.options object.

For example, you can set these options:

myScroller = new iScroll( el, { x:20, y:30, onRefresh: function(){ alert(11); } } );

Would you want to modify these 3 (or more..), considering my steps you'd do:

x, y, scrollbarClass
in the initialization we see that x & y are used (line 120):

// Set starting position that.x = that.options.x; that.y = that.options.y;

That means that these options influences more than just runtime stuff, during initialization it modifies that.x en that.y (even tho pretty simple so far).

3.

myScroller.x = newX;
myScroller.options.x = newX;
myScroller.y = newY; 
myScroller.options.y = newY;
// Also depeneds on x & y, but only do this if you actually useTransform and care about this!

/*
 * obtain required variables..
 */
var appVersion = navigator.appVersion,
    vendor = (/webkit/i).test(appVersion) ? 'webkit' :
        (/firefox/i).test(navigator.userAgent) ? 'Moz' :
        'opera' in window ? 'O' : '',

has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(),

trnOpen = 'translate' + (has3d ? '3d(' : '('),
    trnClose = has3d ? ',0)' : ')';

// Code that actually matters, and where we use above variables
if (that.options.useTransform) that.scroller.style[vendor + 'Transform'] = trnOpen + that.newX + 'px,' + that.newY + 'px' + trnClose;
        else that.scroller.style.cssText += ';position:absolute;top:' + that.newY + 'px;left:' + that.newX + 'px';

4.

myScroller.options.onRefresh = function() { alert(33); }

Maybe you can even do all these things in the options.onDestroy property ;)

Update: I also noticed the destroy function, and might come in convenient if you do want to 'totally clear' the scroller. But I didn't see code that would remove the physically created scrollbar, but I'm not sure.

edit parameters of iscroll4 given at the time of initialisation

1 Answers1