javascript禁止手机浏览器、微信浏览器的上下滑动,滚动问题

最新推荐文章于 2022-06-28 14:45:34 发布

意外金喜

最新推荐文章于 2022-06-28 14:45:34 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript jquery 手机端滚动条手机浏览器微信

本文链接：https://blog.youkuaiyun.com/zzwwjjdj1/article/details/78323377

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种方法来解决手机端弹窗时页面滚动的问题。通过使用JavaScript和jQuery来控制HTML和body元素的样式属性，实现页面在弹窗打开期间禁止滚动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript禁止手机浏览器、微信浏览器的上下滑动，滚动问题。

需求：手机端弹窗的时候，页面禁止滚动，滑动。坑了很久！

开启弹窗的时候javascript代码：

var bodyElem: = document.getElementsByTagName('body')[0];
var htmlElem = document.getElementsByTagName('html')[0];
htmlElem.style['overflow-y'] = 'hidden';
htmlElem.style['height'] = '100%';
bodyElem.style['overflow-y'] = 'hidden';
bodyElem.style['height'] = '100%';

jquery代码：

$("html").css("height":"100%","overflow-y":"hidden"});
$("body").css({"height":"100%","overflow-y":"hidden"});

关闭弹窗的时候javascript代码：

htmlElem.style['overflow-y'] = 'auto';
bodyElem.style['overflow-y'] = 'auto';

jquery代码：

$("html").css({"overflow":"auto"});
$("body").css({"overflow":"auto"});

javascript禁止手机浏览器、微信浏览器的上下滑动,滚动问题

意外金喜的博客：http://blog.youkuaiyun.com/zzwwjjdj1