關於移動端元素定位在頁面可視區外，超出部分隱藏的問題

時間 2019-11-16

標籤關於移動元素定位頁面視區超出部分隱藏問題欄目無線简体版

原文原文鏈接

在作PC端頁面和移動端頁面的時候，出現這樣一個問題：css

給body設置寬、高100%時，將元素使用絕對定位，使其定位在頁面以外，根據不一樣的狀況，再以動畫的形式跑到頁面當中來，給body設置overflow：hidden，在PC端頁面時能夠實現元素在頁面以外，且不會出現滾動條，可是在移動端頁面時，是無效的，經過滑動屏幕，仍是能夠將定位在頁面以外的元素顯示出來，實現不了超出隱藏的效果；html

針對移動端的這種現象，能夠如下兩種方式解決jquery

1、改變定位方式動畫

給body設置100%的寬高以及overflow：hidden不變，改變的是給須要超出可視區隱藏的元素使用position：fixed定位；spa

<!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>

2、增長div包裹scala

在body當中添加一個寬高設置爲100%的div，並給此div設置overflow：hidden，而後須要超出可視區隱藏的元素參照此div進行定位；code

<!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>