-webkit-overflow-scrolling touch // ios上滚动不流畅的问题

版权声明: https://blog.csdn.net/zgpeterliu/article/details/82802509

<div class="info" @scroll="scroll">
                    <div class="inner-info">
                        <h5>{{clauseData.contentTitle}}</h5>
                        <div class="info-wrap" v-for="(item,index) in clauseData.obj" :key="index">
                            <p v-if="item.name" v-html="item.name" class="info-name"></p>
                            <p  v-for="(subItem,subIndex) in item.list" v-html="subItem" :key="subIndex"></p>
                        </div>
                    </div>
</div>

/**
         * @description 监听协议滚动条 用于判断用户是否已看完协议
         * @param event {Object} 事件对象
         */
        scroll (event) {
            if (this.isAgree || this.isEnd) return false
            let target = event.target || event.srcElement || event.path[0]
            let infoHeight = 0
            let scrollTop = target.scrollTop
            infoHeight = target.childNodes[0].clientHeight - target.clientHeight
            if (scrollTop >= Math.floor(infoHeight * 0.95)) this.isEnd = true
        },


    .info
            min-height 6rem
            max-height 7rem
            overflow-y scroll
            font-size .3rem
            -webkit-overflow-scrolling touch        //  ios上滚动不流畅的问题
            .inner-info
                overflow hidden
            h5
                margin 0.2rem
                font-size .3rem
                text-align center
                color $red
            p
                font-size .3rem
            .info-wrap
                margin 0 0.6rem
                font-size 0.24rem
            .info-name
                padding 0.1rem 0

猜你喜欢

转载自blog.csdn.net/zgpeterliu/article/details/82802509