关于移动端元素定位在页面可视区外,超出部分隐…
2018-06-24 01:58:48来源:未知 阅读 ()
在做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进行定位;
<!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>
/** 希望各位大牛告知更多关于移动端的重点 **/
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:表单元素
- 前端CSS五中元素定位类型 2020-06-01
- 关于vue的多页面标签功能,对于嵌套router-view缓存的最终无 2020-06-01
- 关于浏览器兼容问题 2020-05-27
- css设置overflow:hiden行内元素会发生偏移的现象 2020-05-09
- CSS的 行内元素 和 块类元素 2020-05-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash