javascript 禁止下拉页面 “橡皮筋“效果

下拉显示的顶部深灰色区域即是橡皮筋效果

1.第一种

document.body.addEventListener('touchmove', function(event) {console.log(event.source);//if (event.source == document.body)event.preventDefault();}, {passive: false,useCapture: false
});

2.第二种

document.addEventListener('touchmove', function(e) {var e = e || event;e.preventDefault();
}, false);

两种方式的原理差不多，都是阻止屏幕的触发事件，但是，有一个坏处，就是，此处方式的屏蔽，它会把默认的所有事件都禁止掉。

所以，如果你页面中不涉及高度滚动（scroll）和一些事件(event)的话，还是可以使用的～

javascript 禁止下拉页面 “橡皮筋“效果相关推荐

uniapp禁止下拉页面
"enablePullDownRefresh": false, //禁止下拉刷新"allowsBounceVertical": "NO", ...
仿基金查询输入框下拉筛选值效果(JavaScript)
http://www.weste.net/2007/11-24/19463143437.html 仿基金查询输入框下拉筛选值效果(JavaScript)
【SwiftUI模块】0012、SwiftUI-搭建一个类似微博、网易云、抖音个人页面的头部下拉放大图片效果
SwiftUI模块系列 - 已更新11篇 SwiftUI项目 - 已更新1个项目往期Demo源码下载技术:SwiftUI.SwiftUI3.0.下拉放大.tableview粘性头部.头部下拉放大图 ...
Android 12.0 锁屏页面禁止下拉状态栏
目录 1.概述 2.锁屏页面禁止下拉状态栏的核心类 3.锁屏页面禁止下拉状态栏的核心功能分析和实现
微信小程序在ios中下拉出现“橡皮筋”效果
今天和大家聊一聊微信小程序在ios中下拉出现"橡皮筋"效果问题现象话不多说,先看代码(使用taro编写). 代码很简单,一个flex的容器+一个允许进行下拉刷新的ScrollV ...
javascript实现下拉框表单美化的详细实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
不使用输入框如何实现下拉_使用INFINITE AJAX SCROLL实现下拉加载效果
现在很多网页都有个体验不错的效果:浏览到页面底部的时候,自动加载下一页内容,也就是下拉加载效果,这种效果可以让用户不用点击"下一页"按钮,也可以实现翻页,无论在PC还是手机上,体验 ...
android10 禁止下拉状态栏
需求:android10 禁止下拉状态栏,也就是禁止下拉如下图的快速设置面板( Quick settings panel,也叫QS面板) 修改后:怎么拉都拉不下来,包括锁屏页面和正常桌面都无法下拉状态 ...
taro开发微信小程序禁止下拉刷新(ios下拉出现空白问题)
一.问题描述最近用tarojs在做一个小程序项目时,首页需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全 ...

javascript 禁止下拉页面 “橡皮筋“效果

javascript 禁止下拉页面 “橡皮筋“效果相关推荐

最新文章

热门文章