html5页面分屏还有上下拖动

最新推荐文章于 2025-06-05 09:00:05 发布

原创最新推荐文章于 2025-06-05 09:00:05 发布 · 9.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#app #分屏 #拖动 #html5

html 同时被 2 个专栏收录

8 篇文章

订阅专栏

webApp

6 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的自适应布局案例，通过拖拽操作动态调整页面不同区域的高度，适用于移动端应用。案例中还涉及了iframe元素的高度自适应处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用到的框架

app框架

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="/views/share/css/mui.min.css" rel="stylesheet"/>
    <link href="/views/share/css/app.css" rel="stylesheet"/>
    <style>
        html,body{
            margin:0;
            padding:0;
            width: 100%;
            height: 100%;
        }

        .tabBoxBtn{
            background: url(/views/share/images/icon_data.svg) no-repeat;
            background-size: 100%;
            margin: 0 auto;
            width: 60px;
            height: 40px;
            display: block;
            top: -30px;
            position: relative;
            z-index: 99;
        }
        .type-title {
            position: fixed;
            width: 100%;
            margin: 0;
            line-height: 45px;
            color: #85b804;
            border-bottom: 1px solid #ddd;
            padding: 2px 10px;
            z-index: 999999;
            background: #f0f0f0;
        }
        .mui-slider-group55{
            margin-top: 45px;
        }
        .tabBox {
            height: 10px;
            display: block;
            position: fixed;
            top: 37%;
            width: 100%;
            box-shadow: 5px -4px 5px rgba(153, 153, 153, 0.54);
            z-index: 999999;
            background-color: #F0F0F0;
        }
        .topBox {
            height: 35%;
            /*margin-bottom: 1px;*/
            overflow-y: scroll;
        }
        .clear{
            clear: both;
        }
        .contentBox {
            height: 65%;
            overflow-y: scroll;
        }

        .bodyBox {
            height: 100%;
        }
        .boxIframe{
            margin-top: 18px;
            height: 95%;
            overflow-y: scroll;
        }
        iframe {
            width: 100%;
            height: 100%;
            /*background: #000;*/
        }
        .nameBox {
            padding: 10px!important;
        }
        .nameBox p{
            text-align: justify!important;
            text-justify: inter-ideograph!important;
            color: #000!important;
        }
    </style>
</head>
<body>
<div class="mui-content back-color-fff bodyBox">
    <div id="topBox" class="mui-row  topBox">
        <div class="mui-row type-title f14">
            <div class="mui-col-xs-6 mui-text-left">阅读材料</div>
        </div>
        <div class="mui-slider-group55">
            <div class="nameBox">
                <p class="f16">
                    ${bTestpaper.name}
                </p>
            </div>
        </div>
    </div>

    <div class="clear"></div>
    <div id="contentBox" class="contentBox">
        <div class="mui-row">
            <div class="tabBox" id="tabBox"><a href="javascript:;" class="tabBoxBtn" id="dragBtn"></a></div>
        </div>
        <div class="clear"></div>
        <div id="boxIframe" class="mui-row boxIframe">
            <iframe id="testpaperStuff" onload="loading()" src="/share?id=${sid}&PaperType=1" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"
                    allowtransparency="yes">

            </iframe>
        </div>
    </div>
</div>
<script src="/views/share/js/jquery.min.js"></script>
<script src="/views/share/js/mui.min.js"></script>
<script src="/views/share/js/footer.js"></script>
<script>
    loading();
    var clientHeight  = document.documentElement.clientHeight;
    //拖动
    var dragBtn = document.getElementById("dragBtn");
    dragBtn.addEventListener("dragstart",function (e) {
//        dragIndex = 0;
    });
    dragBtn.addEventListener("drag",function (e) {
//       console.log(e);
        var detail = e.detail;
        var direction = detail.direction;
        var deltaY = detail.deltaY;
        deltaY = Math.abs(deltaY);
        deltaY = 6;
        var maxLen = 50;
        var maxHeight = clientHeight - maxLen;
        var divTopHeight = clientHeight*0.022;
        var divTop = $("#topBox").height()+divTopHeight;
        if(direction=="down"){
            var topBoxAdd = $("#topBox").height()+deltaY;//上面div
            var contentBoxDel = $("#contentBox").height()-deltaY;//下面div
            topBoxAdd = topBoxAdd>maxHeight? maxHeight:topBoxAdd;
            contentBoxDel = contentBoxDel<maxLen? maxLen:contentBoxDel;
            $("#topBox").height(topBoxAdd);
            $("#contentBox").height(contentBoxDel);

            divTop = divTop>maxHeight?maxHeight+divTopHeight:divTop;//拖动按钮
        }
        if(direction=="up"){
            var topBoxDel = $("#topBox").height()-deltaY;//上面div
            var contentBoxAdd = $("#contentBox").height()+deltaY;//下面div
            topBoxDel = topBoxDel<maxLen? maxLen:topBoxDel;
            contentBoxAdd = contentBoxAdd>maxHeight? maxHeight:contentBoxAdd;
            $("#topBox").height(topBoxDel);
            $("#contentBox").height(contentBoxAdd);

            divTop = divTop<maxLen?maxLen:divTop;//拖动按钮

        }
//        console.log(divTop);
        $("#tabBox").css("top",divTop+"px");

    });
    dragBtn.addEventListener("dragend",function (e) {
//        console.log(e);
    });
    //拖动 end
    function loading(){
        $("#testpaperStuff").height(clientHeight);
    }

</script>
</body>
</html>

滚动div监听

在iframe的脚本

 var fu = window.parent.document;
        $("#boxIframe",fu).scroll(function () {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (askPage <= totalPage && askPage > 2) {
                if (scrollTop + windowHeight + 80 > scrollHeight) {
                    if (is_scroll) {
                        $("#answerBox").append("<p id='loading' style='text-align: center;background: #FFFFFF;padding-top: 1px;'> 正在加载...</p>");
                        showAsk();
                    }
                }
            }
        });

iframe高度自适应

在iframe的脚本

//iframe 的高度
function loadIFrame (){
    var fu = window.parent.document;
    var height = $("#testpaperStuff",fu).height();
    //console.log(height);
    if(height!=null&&height-10<$("html").height()){
        $("#testpaperStuff",fu).height($("html").height());
    }
}