介绍

vue-disbounce是一款基于Vue.js的自定义组件，可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果。

组件

<template>
    <div
        :style="{'background-color':backgroundColor }"
        class="vd-wrapper"
    >
        <div
            class="vd"
            ref="vd"
        >
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "vd",

    props: {
        backgroundColor: {
            type: String,
            default: "#ffffff"
        }
    },

    data() {
        return {};
    },

    mounted() {
        this.vd = this.$refs["vd"];
        this.vd.addEventListener("touchstart", this.touchstartEvent);
        this.vd.addEventListener("touchmove", this.touchmoveEvent, {
            passive: false // 阻止默认事件时，设置passive为false，提高性能
        });
    },

    methods: {
        getPoint(e) {
            return {
                x: e.touches ? e.touches[0].pageX : e.clientX,
                y: e.touches ? e.touches[0].pageY : e.clientY
            };
        },

        touchstartEvent(e) {
            this.startPoint = this.getPoint(e);
        },

        touchmoveEvent(e) {
            if (!this.startPoint) return;

            const scrollTop = this.vd.scrollTop; // 距离页面顶部的距离
            const curPoint = this.getPoint(e);
            const moveY = curPoint.y - this.startPoint.y; // 纵向移动的距离

            // 下拉
            if (moveY > 0) {
                // 如果在顶部，阻止浏览器默认的滚动，避免触发bounce
                if (scrollTop <= 0) e.preventDefault();

                // 上拉
            } else {
                const scrollHeight = this.vd.scrollHeight; // 全文区域的高度
                const clientHeight = this.vd.clientHeight; // 可见区域的高度
                const scrollBottom = scrollHeight - clientHeight - scrollTop; // 距离页面底部的距离

                // 如果在底部，阻止浏览器默认的滚动，避免触发ios的bounce效果
                if (scrollBottom <= 0) e.preventDefault();
            }
        }
    }
};
</script>

<style scoped="scoped">
.vd-wrapper {
    height: 100vh;
}

.vd {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
</style>

调用

为了方便调用，笔者已经上传到npm
npm安装依赖npm i vue-disbounce
安装完以后，在app.vue文件调用

<template>
    <VueDisbounce id="app">
        <!-- 如果有使用路由， -->
        <router-view />
    </VueDisbounce>
</template>

<script>
import VueDisbounce from "vue-disbounce";

export default {
    components: {
        VueDisbounce
    }
};
</script>

作者

SuperIron

相关链接

https://www.npmjs.com/package/vue-disbounce
https://github.com/SuperIron/vue-disbounce