uni-app手机端项目touchmove禁止页面上下拉滑动

奚大野...2026-01-16 15:59

一需求：禁止手机端页面上下滑动

javascript 复制代码

document.body.addEventListener(
  "touchmove",
  (e) => {
    //阻止默认的处理方式(阻止下拉滑动的效果)
    e.preventDefault();
    return false;
  },
  /**
   如果我们是为了阻止页面滚动添加了上述代码，默认行为就是滚动页
   面，但是如果我们阻止了这一默认行为，浏览器是无法预先知道的，
   必须等待事件监听器执行完成后，才知道要去阻止默认行为。等待监
   听器的执行是耗时的，，有些甚至耗时很明显，这样就会导致页面卡
   顿。即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执
   行也会耗时。所以就有了passive属性，如果要阻止默认事件可以设
   置passive：false。
  */
  { passive: false }
);

二需求：让某一个元素平滑滚动到某个位置

javascript 复制代码

let scrollLocation = dom.querySelector(".posterEle_Box_top_box")
let options = {
	left: 0,
	top: 500,
	behavior: 'smooth'
}
document.querySelector("#posterCreate_app_page").scrollTo(options)

三需求：在某一个dom元素区域内滑动禁止页面上下滚动

javascript 复制代码

//给该元素添加一个touchmove事件，并在该事件内增加
if(e.cancelable){e.preventDefault()}