移动端js弹出层滚动的时候 body层不可滚动的解决办法

最新推荐文章于 2024-08-08 20:55:06 发布

张静蕾

最新推荐文章于 2024-08-08 20:55:06 发布

阅读量1.2w

点赞数

本文链接：https://blog.csdn.net/queenzjl/article/details/53507661

版权

在移动端网站开发中，遇到弹出导航列表时底层body跟随滚动的问题。尝试了设置html和body的height及overflow属性，以及使用overflow-y和touchmove事件，但效果不理想。最终解决方案是在弹出层添加特定CSS样式，并在关闭时移除，以实现弹出层滚动而body层保持静止的效果。

摘要由CSDN通过智能技术生成

最近在做移动端网站，在点击导航栏，弹出导航列表时，出现了问题。下滑列表时底层body也跟着滚动，连查带想的折腾了两天才解决这个问题。下面主要分享一下解决办法以及关键代码。

一、有的网友建议弹出层弹出时给 html 和 body 都加上“height：100%；overflow：hidden；”，然而在手机上并没有什么卵用

二、结合弹出层加上“overflow-y：auto”依然不起作用

三、加上touchmove事件：window.ontouchmove = function(e){e.preventDefault();return false;},结果整个屏幕都无法滑动，这个办法也不行
。。。。
后来经过网友的帮助，结合我的代码终于找到了解决的办法

代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>移动端->弹出层内容滚动的时候，不影响body的滚动条处理</title>

    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-resource.js"></script>
    <style>
        *{