admin管理员组

文章数量:1579085

取消移动端上滑刷新
定义几个全局变量，

let now_top_height, now_address, init_address
// 当前距离顶部的高度，滑动后元素的坐标，滑动前元素的坐标

判断浏览器是是否向上滑动，判断是否已经到达页面顶部（因为只有当到达页面顶部的时候，才会触发上滑刷新）是否会影响浏览器正常的上下滑动。

// 开始滑动的坐标
document.addEventListener("touchstart", event => {
  // 查看滑动的时候，距离顶部的距离
  now_top_height = document.querySelector('#app').offsetTop - document.documentElement.scrollTop
  // 获取当前元素的Y轴，（因为是判断是否上下移动，所以只需要获取Y轴的位置就行
  const touch = event.targetTouches[0];
  now_address = touch.pageY;
})

// 滑动结束的坐标
document.addEventListener("touchend", event => {
  /* 当我们停止滑动的时候，就需要将当前元素的坐标给清空 */
  now_address = ''
})

// 当元素上下移动的时候
document.addEventListener('touchmove', event => {
  /* 
  passived主要用于优化浏览器页面滚动的性能，让页面滚动更顺滑
  assive 的意思是“顺从的”，表示它不会对事件的默认行为说 no，浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。
  */
  
  var touch = event.targetTouches[0];
  // 判断当前元素的是否到达页面顶部，并且元素也在页面顶部，就取消默认事件
  if (now_address - touch.pageY < 0 && now_top_height === 0) event.preventDefault()
}, {passive: false})

本文标签： 器上

版权声明：本文标题：移动端，取消谷歌浏览器上滑刷新 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1727849242a1133423.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。