首页手记关于在移动端 body overflow：hidden...

关于在移动端 body overflow：hidden 无效的问题

标签：

JavaScript

一、简述

这篇文章作为一道前菜哈。

很多同学在做移动端的时候都有遇到移动端各种坑，各种固定fiexd失效，input输入框错位，软键盘弹出错位等等….但是，在做一张单页面的页面时，尤其是以整个页面去加载背景图片的时候，背景图片固定就很有必要了。

这里先讨论一下body关于overflow的问题，移动端固定的问题会在下一篇文章讨论。

二、简单演示

很多时候都是想着使用body去固定:

body{

position:fixed; //这个属性暂时不提，重点看overflow

overflow:hidden;

}

1、这样的效果在「PC端」是可以的，整个页面时被固定的：

em….感觉说的好空，有句话说得好「talk is easy ,show me the code」 ，上个demo ：

em…上完code，再来「PC端」的效果演示：

OK，上面GIF演示的效果已经告诉我们，body的overflow：hidden在「PC端」是有效果的。

em..接下来是重点好吧，说说在移动端的body 如何不行？

2、同样的样式在「移动端」是可以滑动的，可以滑动就是不合理了。

如何看手机的上样式效果对不对，我这里稍微讲2种方式哈：

（A.说用「微信开发者工具」的同学，我这里就不讲了，这也是一种方法可以查看移动端的样式效果，尤其是要用在微信网页中的，是一个不错的推荐。B.说用模拟器的同学，我也不想说太多了，查看一个简单的样式，难道要全开安卓和iOS 模拟器？）

2.1、放到服务器上

这样，我把网页放到了我个人的服务器上，比较简单粗暴的做法，很通用哈，一输网址就可以看到了，下面是把网页放到手机之后的效果：

看到上面效果，what！！！body的hidden:overflow确实在「移动端」真是无效的，很明显的是可以滑动..

这时IOS手机上的效果，在安卓手机上同样也是一样的效果，这里我就不录屏了，有点累呀

细心的同学可以发现我手机上的网页会出现蓝色，橙色的遮罩，em...get 到我这个点了，上面演示的是第二种方法里的一些调试。

2.2使用远程web调试工具-----weinre

️注意！注意！注意！使用的是weinre这款远程调试工具，重要的事情讲一遍。

上面说的就是可以使用这个款远程web页面调试工具，一款稍显老的工具，不过好在可以跨平台全终端使用，可以无线查看和调试dom和css样式，但是不可以修改dom,不可以断点调试…em…缺点比较多，但是用来查看这个demo是妥妥的。

有兴趣的同学可以找一下weinre的使用方法。（或者空闲的时候写一下使用weinre的基本教程和心得）

原理就是需要在原网页中插入一段js代码，实现中间的target，用于传输调试请求，请保持在同一网络上。

️ 重点来了！重点来了！重点来了！

作用： 2.2.1、可以实现移动端可以无线直接查看本地电脑编写的网页，而无需放置到服务器上。

2.2.2、可以实现在电脑直接对移动端进行dom和样式调试，无线连接调试。

可以上个图看一下效果；

第一种情况：就是我直接在weinre目录中添加需要查看的文件，在手机上可以直接访问电脑ip，获取本地编写的网页。

上个图先：

～文件所在：

～手机访问：

可以清晰的看到手机和电脑处于同一局域网，手机正在访问到电脑本地的网页。

第二种情况：我把网页放到了我的服务器上，手机访问可以直接查看，在电脑上也是可以对手机的样式进行调试的，如下图：

这里是可以看到我通过网络访问进行的，并在浏览器出现类似于chrome dev调试工具的页面，正在对手机样式进行调试。

好吧综上所述，可以看到weinre是可以又这个能力对移动端进行样式调试的，并且证明说overflow:hidden在移动端确实是可以进行无障碍的滑动。

️️️ 回到主题！回到主题！回到主题！

三、结论以及解决方法

事实证明了hidden在移动端无效。原因总结来说是移动端的坑，对网页兼容的问题；我觉得是移动端网页的html页面本身也是可以「上下拉扯滑动1」的，而body的position位置默认是static，不做修改的情况下是直接随着html页面「滑动1」，而body可以直接在html内实现「滑动2」，（两个滑动是不一样的滑动，「滑动1」指的是整个html相对于浏览器窗口滑动，「滑动2」指的是整个body相对于html页面滑动）

下面是「滑动1」的如图：