zoukankan      html  css  js  c++  java
  • iscroll5 滚动条根据内容高度自动显示隐藏及强制横屏时方向错位

    横竖屏方向错位:

    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();
        }
  • 相关阅读:
    .Net魔法堂:史上最全的ActiveX开发教程——发布篇
    .Net魔法堂:史上最全的ActiveX开发教程——开发篇
    JS魔法堂:浏览器模式和文档模式怎么玩?
    JS魔法堂:精确判断IE的文档模式by特征嗅探
    JS魔法堂:追忆那些原始的选择器
    意译:自调用函数表达式
    一起Polyfill系列:让Date识别ISO 8601日期时间格式
    一起Polyfill系列:Function.prototype.bind的四个阶段
    poco 线程库
    CDN理解<转>
  • 原文地址:https://www.cnblogs.com/qianduanjingying/p/11589409.html
Copyright © 2011-2022 走看看