禁止当前html页面下拉刷新,移动端禁止页面下拉刷新（页面有滚动区域）

向右看齐 2022-10-06 01:00 1阅读 0赞

function isscroll(dom,flag) \{

// 页面是否启用不可下拉

if(flag) \{

document.body.addEventListener('touchmove',function (event) \{

event.returnValue = true; // 允许页面下拉的属性

\}, \{ passive: false \});

return;

\}

let startY

document.body.addEventListener('touchstart', (e) => \{

startY = e.touches\[0\].pageY;

\}, \{ passive: false \});

document.body.addEventListener('touchmove', handler, \{ passive: false \});

function handler(e) \{

const moveY = e.touches\[0\].pageY;

// scrollTop是盒子内容被滚动条卷去的头部的高度

const top = dom.scrollTop;

// clientHeight获取页面的可视区宽高

const ch = dom.clientHeight;

// scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系。

const sh = dom.scrollHeight;

if (!isChildTarget(e.target, dom)) \{

e.preventDefault();

// top === 0 && moveY > startY 页面没有滚动且手指下滑

// top + ch === sh && moveY < startY 页面可滑动的地方滑动到了最底部且手指上滑

\} else if ((top === 0 && moveY > startY) || (top + ch === sh && moveY < startY)) \{

// alert(1)

e.preventDefault();

\}

\}

\}

function isChildTarget(child, parent, justChild = false) \{

// justChild为true则只判断是否为子元素，若为false则判断是否为本身或者子元素 默认为false

let parentNode;

if (justChild) \{

parentNode = child.parentNode;

\} else \{

parentNode = child;

\}

if (child && parent) \{

while (parentNode) \{

if (parent === parentNode) \{

return true;

\}

parentNode = parentNode.parentNode;

\}

\}

return false;

\}

export default isscroll;

// 不想禁止下拉的页面(有待改进)

const collapse = document.querySelector('.collapse');

isscroll(collapse, true)

// 禁止下拉的页面

const tree = document.querySelector('.tree .ant-spin-container');

isscroll(tree)

标签：startY,false,const,parentNode,&&,刷新,滚动,页面

来源： https://blog.csdn.net/a1390033590/article/details/102746973

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 php手机页面下拉刷新,js仿手机页面文件下拉刷新效果

最后弄出了一个简单的下拉刷新页面的形式，还不算太复杂要在仿真器下才能看到效果，比如chrome的里边(或者用手机浏览器查看，但测试发现有些浏览器有问题，目前手机猎豹是没问题

快来打我*/ 2023年01月17日 08:20/ 0 赞/ 128 阅读

相关 uni-app 页面下拉刷新

vue页面下拉刷新 1. 监听页面下拉刷新动作onPullDownRefresh 页面 2. 开启页面下拉刷新功能enablePullDownRefresh page

女爷i/ 2022年11月18日 01:18/ 0 赞/ 280 阅读

相关 CSS - H5 页面禁止页面上拉下拉及滚动

前言开发 `H5` 页面时，我们需要将页面固定住禁止上拉下拉及滚动，网上很多方法，多数是 `JS` 来判断滚动条来实现。实现我推荐使用 `CSS` 实现，几

╰半夏微凉°/ 2022年10月25日 14:28/ 0 赞/ 311 阅读

相关禁止当前html页面下拉刷新,移动端禁止页面下拉刷新（页面有滚动区域）

function isscroll(dom,flag) \{ // 页面是否启用不可下拉 if(flag) \{ document.body.addEventListen

向右看齐/ 2022年10月06日 01:00/ 0 赞/ 2 阅读

相关禁止页面刷新

如下来自：[http://hi.baidu.com/lqx357327500/blog/item/4ad8e07608e1ec13b151b936.html][http_hi.

向右看齐/ 2022年06月15日 00:20/ 0 赞/ 236 阅读

相关禁止手机浏览器下拉刷新

<body style="overflow:hidden">

ゝ一世哀愁。/ 2022年06月06日 11:50/ 0 赞/ 199 阅读

相关移动端下拉刷新练习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年06月01日 06:05/ 0 赞/ 166 阅读

相关微信小程序页面刷新,下拉刷新

最近做项目的时候略微研究了一下微信小程序的页面刷新机制. 微信小程序的刷新类似于Ajax的刷新,可以通过setData实现部分页面的刷新,并不需要onLoad页面. 当然,

曾经终败给现在/ 2022年05月25日 02:47/ 0 赞/ 259 阅读

相关移动端禁止页面滚动

H5页面超过一屏，点击某处弹出弹出框提示，默认情况下，页面还可以滑动。解决方法： //添加禁止屏幕滚动 document.querySelector('.eleme

喜欢ヅ旅行/ 2022年05月21日 11:26/ 0 赞/ 268 阅读

相关禁止刷新页面倒计时

第一种： <SCRIPT LANGUAGE="JavaScript"> var intDiff; function gradeId(g

素颜马尾好姑娘i/ 2021年07月24日 12:03/ 0 赞/ 463 阅读