关于移动端元素定位在页面可视区外,超出部分隐…

2018-06-24 01:58:48来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

在做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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:表单元素

下一篇:深入理解display属性——前端布局常用重要属性