iScroll won't let items be clicked

前端 未结 9 2118
长情又很酷
长情又很酷 2021-02-07 05:41

I am using iScroll4 and it\'s working great!

This are the functions I use to init, refresh and end iScroll:

function iniciarIscroll(){
    /*En ie7 no lo         


        
9条回答
  •  别那么骄傲
    2021-02-07 06:16

    One work around I've used is to "freeze" the iscroll when I want the user to be able to make edits. The incompatibility that iScroll has with inputs is related as far as I can tell to the css transformations in combination with the touch support it applies to the content in the scroller. If you temporarily disable the scroller, you can allow the user to enter in values. The trick is to make sure the current scroll location of the content is preserved on disabling. When "frozen" a user can update the inputs within the visible area. The downside is that the scroller won't scroll during this state. You'll have to thaw it on some event.

    I added these functions to the iScroll.prototype to make this work:

    _get_current_scroll_px: function (transformStyle) {
        //return the first string that looks like an integer, that should be the x translation
        return /[\-0-9]+px/.exec(transformStyle)[0];
    },
    
    
    freeze: function () {
        this.disable();
        this.savedStyle = this.scroller.style[vendor + 'Transform'];
        this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller
        this.scroller.style[vendor + 'Transform'] = '';
    },
    
    thaw: function () {
        this.scroller.style[vendor + 'Transform'] = this.savedStyle;
        this.scroller.style['marginLeft'] = '0';
        this.enable();
    }
    

    Calling or freezing it would look like:

    //user triggered event causes freeze
    yourFreezeEventCallback: function () { 
        myScroll1.freeze();
        //now user can use visible inputs on screen
    }
    

    Thawing it would look like:

    //user triggered event causes thaw
    yourThawEventCallback: function () { 
        myScroll1.thaw();
        //now scrolling is back and inputs can no longer be edited or in focus
    }
    

    Obviously, you'll need to integrate this in to your own project somehow but it has worked for me. It isn't ideal so I'm looking forward to the iScroll update. Warning: this isn't tested in IE so I won't vouch for it there. I hope this is at least a start to help you get to a work around.

提交回复
热议问题