在做PC端页面和移动端页面的时候，出现这样一个问题：给body设置宽、高100%时，将元素使用绝对定位，使其定位在页面之外，根据不同的情况，再以动画的形式跑到页面当中来，给body设置overflow：hidden，在PC端页面时可以实现元素在页面之外，且不会出现滚动条，但是在移 ...
在做PC端页面和移动端页面的时候，出现这样一个问题：
给body设置宽、高100%时，将元素使用绝对定位，使其定位在页面之外，根据不同的情况，再以动画的形式跑到页面当中来，给body设置overflow：hidden，在PC端页面时可以实现元素在页面之外，且不会出现滚动条，但是在移动端页面时，是无效的，通过滑动屏幕，还是可以将定位在页面之外的元素显示出来，实现不了超出隐藏的效果；
针对移动端的这种现象，可以以下两种方式解决
一、改变定位方式
给body设置100%的宽高以及overflow：hidden不变，改变的是给需要超出可视区隐藏的元素使用position：fixed定位；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no"/> <title>改变定位方式</title> <script src='/images/loading.gif' data-original="jquery-3.1.1.min.js"></script> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; width: 100%; } body{ background:green; overflow: hidden; } div{ width: 100px; height:100px; background:orange; position: fixed; top: 100%; } </style> <script> $(function(){ $('div').css({transition:'top 2s linear 3s',top:'70%'}) }) </script></head><body> <div></div></body></html>
二、增加div包裹
在body当中添加一个宽高设置为100%的div，并给此div设置overflow：hidden，然后需要超出可视区隐藏的元素参照此div进行定位；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no"/> <title>增加div包裹</title> <script src='/images/loading.gif' data-original="jquery-3.1.1.min.js"></script> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; width: 100%; } div{ height: 100%; width: 100%; background:green; overflow: hidden; position: relative; } span{ width: 100px; height:100px; background: orange; position:absolute; top:100%; } </style> <script> $(function(){ $('span').css({transition:'top 2s linear 3s',top:'60%'}) }) </script></head><body> <div> <span></span> </div></body></html>
/** 希望各位大牛告知更多关于移动端的重点 **/
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：关于移动端元素定位在页面可视区外，超出部分隐藏的问题
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
