码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-09-26 12:03:04      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:pass   size   sid   width   tran   根据   toms   increase   get   

横竖屏方向错位:

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();
    }

 

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

标签:pass   size   sid   width   tran   根据   toms   increase   get   

原文地址:https://www.cnblogs.com/qianduanjingying/p/11589409.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!