原文：http://www.cnblogs.com/Immortal-brother/archive/2017/10/27/7743340.html
在做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="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進行定位；
推薦下我的前端群：524262608，不定期會有乾貨分享，初學者還有一套整理好的入門教程，歡迎初學者和進階中的小夥伴。
<!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="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