编辑初始化时给定的iscroll4参数

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.

Answer 1

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

I would:

1. Sum up the particular options you would want to modify.
   
2. See which of these options matter during initialitation
   
3. programmatically (manually) change these options
   
4. options that only matter at runtime (ie 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:

1. x, y, scrollbarClass

2. 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.