介绍

基于 Vue.js 的滚动组件，实现避免触发 ios 浏览器的 bounce 效果

组件

<template><div class="scroll" ref="scroll"><slot></slot></div>
</template><script>export default {name: "scroll",data() {return {};},mounted() {this.scroll = this.$refs["scroll"];this.scroll.addEventListener("touchstart", this.touchstartEvent);this.scroll.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.scroll.scrollTop; // 距离页面顶部的距离const curPoint = this.getPoint(e);const moveY = curPoint.y - this.startPoint.y; // 纵向移动的距离// 下拉if (moveY > 0) {// 如果在顶部,阻止浏览器默认的滚动,避免触发bounceif (scrollTop <= 0) e.preventDefault();// 上拉} else {const scrollHeight = this.scroll.scrollHeight; // 全文区域的高度const clientHeight = this.scroll.clientHeight; // 可见区域的高度const scrollBottom = scrollHeight - clientHeight - scrollTop; // 距离页面底部的距离// 如果在底部,阻止浏览器默认的滚动,避免触发ios的bounce效果if (scrollBottom <= 0) e.preventDefault();}}}};
</script><style scoped="scoped">.scroll {width: 100%;height: 100%;overflow-y: auto;-webkit-overflow-scrolling: touch;}
</style>

调用

可在 app.vue 文件调用，全局使用

<template><scroll id="app"><router-view /></scroll>
</template><script>import Scroll from "@/components/scroll";export default {components: {Scroll},created() {}};
</script>

Vue.js 实现禁止 ios 浏览器的 bounce 效果相关推荐

HTML引入vue.js，在ie浏览器中不显示
因为只有两个页面,所以我没有用 vue-cli 搭框架,直接在 HTML 中引入vue.js 文件.发现其他浏览器都能正常显示,ie 下显示不正常,而且还报错,错误信息如下: 原因: 主要是因为 ie ...
vue中禁止ios浏览器页面滚动的橡皮筋效果
mounted () {document.addEventListener('touchmove', function (e) {e.preventDefault() // 阻止默认的处理方式(阻止下 ...
html关闭ios橡皮筋效果,禁止ios浏览器页面上下滚动 (橡皮筋效果)
在ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为. 有两种方法可以解决这个问 ...
Vue移动端开发IOS浏览器回退时页面不刷新或未正常发起请求
移动端微信公众号项目进行UAT测试时遇到一个问题,ios微信浏览器访问项目时回退上一级页面异常,未刷新.网上看的是由于ios回退是从缓存中读取数据的,由于开发环境不方便测试,找到如下解决方法经测试是 ...
禁止ios浏览器页面滚动的橡皮筋效果
问题:在做手机端,通过拖拽调整某个div大小时,拖拽引起了整体页面的弹动方法一:通过css设置body宽高 html, body {width: 100%;height: 100%;overflow ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
第5章　运维和发布Vue.js项目
第5章运维和发布Vue.js项目一般传统公司特别喜欢一个角色用一个人,如在生产流水线上,一个工人只负责拧螺丝,另一个工人只负责喷漆.很多软件公司也是这样,有人专门负责编写代码,有人专门负责运维.但 ...
在 HTML 中引入 vue.js 写页面
突然说要写两个页面(只有两个页面,不是一个完整的项目..),有点懵,不知道从哪下手,而且只对 vue 熟悉那么一丢丢,其他框架不是很熟悉.但是没办法鸭,只能硬着头皮去做了!在这里做一下笔记. 一.前期 ...
Vue.js 2 入门与提高（一）
2019独角兽企业重金招聘Python工程师标准>>> ** Vue.js -- 渐进式前端框架 ** Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前 ...

Vue.js 实现禁止 ios 浏览器的 bounce 效果

介绍

基于 Vue.js 的滚动组件，实现避免触发 ios 浏览器的 bounce 效果

组件

调用

可在 app.vue 文件调用，全局使用

Vue.js 实现禁止 ios 浏览器的 bounce 效果相关推荐

最新文章

热门文章