iscroll5 滚动条根据内容高度自动显示隐藏及强制横屏时方向错位

Posted 2022-12-04 qianduanjingying

横竖屏方向错位：

move: function (e) 
        if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) 
            return;
        

        if ( this.options.preventDefault )     // increases performance on android? TODO: check!
            e.preventDefault();
        

        var point        = e.touches ? e.touches[0] : e,
            deltaX        = point.pageX - this.pointX,
            deltaY        = point.pageY - this.pointY,
            timestamp    = utils.getTime(),
            newX, newY,
            absDistX, absDistY;

        this.pointX        = point.pageX;
        this.pointY        = point.pageY;

        this.distX        += deltaX;
        this.distY        += deltaY;
        absDistX        = Math.abs(this.distX);
        absDistY        = Math.abs(this.distY);

        // We need to move at least 10 pixels for the scrolling to initiate
        if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) 
            return;
        

        // If you are scrolling in one direction lock the other
        if ( !this.directionLocked && !this.options.freeScroll ) 
            if ( absDistX > absDistY + this.options.directionLockThreshold ) 
                this.directionLocked = ‘h‘;        // lock horizontally
             else if ( absDistY >= absDistX + this.options.directionLockThreshold ) 
                this.directionLocked = ‘v‘;        // lock vertically
             else 
                this.directionLocked = ‘n‘;        // no lock
            
        

        if ( this.directionLocked == ‘h‘ ) 
            if ( this.options.eventPassthrough == ‘vertical‘ ) 
                e.preventDefault();
             else if ( this.options.eventPassthrough == ‘horizontal‘ ) 
                this.initiated = false;
                return;
            

            deltaY = 0;
         else if ( this.directionLocked == ‘v‘ ) 
            if ( this.options.eventPassthrough == ‘horizontal‘ ) 
                e.preventDefault();
             else if ( this.options.eventPassthrough == ‘vertical‘ ) 
                this.initiated = false;
                return;
            

            deltaX = 0;
        

        if(this.options.isReverse)
            let oldDeltaX = deltaX;
            let oldDeltaY = deltaY;
            deltaX = this.hasHorizontalScroll ? oldDeltaY : 0;
            deltaY = this.hasVerticalScroll ? -oldDeltaX : 0;
        else
            deltaX = this.hasHorizontalScroll ? deltaX : 0;
            deltaY = this.hasVerticalScroll ? deltaY : 0;
        

        newX = this.x + deltaX;
        newY = this.y + deltaY;

        // Slow down if outside of the boundaries
        if ( newX > 0 || newX < this.maxScrollX ) 
            newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
        
        if ( newY > 0 || newY < this.maxScrollY ) 
            newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
        

        this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
        this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;

        if ( !this.moved ) 
            this._execEvent(‘scrollStart‘);
        

        this.moved = true;

        this._translate(newX, newY);

/* REPLACE START: _move */

        if ( timestamp - this.startTime > 300 ) 
            this.startTime = timestamp;
            this.startX = this.x;
            this.startY = this.y;
        

/* REPLACE END: _move */

    

根据内容自动显示隐藏滚动条：

refresh: function () 
        this.transitionTime();
        if ( this.options.listenX && !this.options.listenY ) 
            // this.indicatorStyle.display = this.scroller.hasHorizontalScroll ? ‘block‘ : ‘none‘;
            this.wrapper.style.display = this.scroller.hasHorizontalScroll ? ‘block‘ : ‘none‘;
         else if ( this.options.listenY && !this.options.listenX ) 
            // this.indicatorStyle.display = this.scroller.hasVerticalScroll ? ‘block‘ : ‘none‘;
            this.wrapper.style.display = this.scroller.hasVerticalScroll ? ‘block‘ : ‘none‘;
         else 
            this.wrapper.style.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? ‘block‘ : ‘none‘;
            // this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? ‘block‘ : ‘none‘;
        

　　　　　if ( this.scroller.hasHorizontalScroll && this.scroller.hasVerticalScroll ) 
            utils.addClass(this.wrapper, ‘iScrollBothScrollbars‘);
            utils.removeClass(this.wrapper, ‘iScrollLoneScrollbar‘);

            if ( this.options.defaultScrollbars && this.options.customStyle ) 
                if ( this.options.listenX ) 
                    this.wrapper.style.right = ‘8px‘;
                 else 
                    this.wrapper.style.bottom = ‘8px‘;
                
            
         else 
            utils.removeClass(this.wrapper, ‘iScrollBothScrollbars‘);
            utils.addClass(this.wrapper, ‘iScrollLoneScrollbar‘);

            if ( this.options.defaultScrollbars && this.options.customStyle ) 
                if ( this.options.listenX ) 
                    this.wrapper.style.right = ‘2px‘;
                 else 
                    this.wrapper.style.bottom = ‘2px‘;
                
            
        

        var r = this.wrapper.offsetHeight;    // force refresh

        if ( this.options.listenX ) 
            this.wrapperWidth = this.wrapper.clientWidth;
            if ( this.options.resize ) 
                this.indicatorWidth = Math.max(Math.round(this.wrapperWidth * this.wrapperWidth / (this.scroller.scrollerWidth || this.wrapperWidth || 1)), 8);
                this.indicatorStyle.width = this.indicatorWidth + ‘px‘;
             else 
                this.indicatorWidth = this.indicator.clientWidth;
            

            this.maxPosX = this.wrapperWidth - this.indicatorWidth;

            if ( this.options.shrink == ‘clip‘ ) 
                this.minBoundaryX = -this.indicatorWidth + 8;
                this.maxBoundaryX = this.wrapperWidth - 8;
             else 
                this.minBoundaryX = 0;
                this.maxBoundaryX = this.maxPosX;
            

            this.sizeRatioX = this.options.speedRatioX || (this.scroller.maxScrollX && (this.maxPosX / this.scroller.maxScrollX));
        

        if ( this.options.listenY ) 
            this.wrapperHeight = this.wrapper.clientHeight;
            if ( this.options.resize ) 
                this.indicatorHeight = Math.max(Math.round(this.wrapperHeight * this.wrapperHeight / (this.scroller.scrollerHeight || this.wrapperHeight || 1)), 8);
                this.indicatorStyle.height = this.indicatorHeight + ‘px‘;
             else 
                this.indicatorHeight = this.indicator.clientHeight;
            

            this.maxPosY = this.wrapperHeight - this.indicatorHeight;

            if ( this.options.shrink == ‘clip‘ ) 
                this.minBoundaryY = -this.indicatorHeight + 8;
                this.maxBoundaryY = this.wrapperHeight - 8;
             else 
                this.minBoundaryY = 0;
                this.maxBoundaryY = this.maxPosY;
            

            this.maxPosY = this.wrapperHeight - this.indicatorHeight;
            this.sizeRatioY = this.options.speedRatioY || (this.scroller.maxScrollY && (this.maxPosY / this.scroller.maxScrollY));
        

        this.updatePosition();