原生JS实现聊天窗口的输入框点击边框实现上下拖动改变输入框和聊天记录列表大小高度

最新推荐文章于 2022-08-30 10:12:54 发布

喜大普奔⁶⁶⁶

最新推荐文章于 2022-08-30 10:12:54 发布

阅读量1.1k

点赞数 2

分类专栏： web js 文章标签： javascript js html NIM

本文链接：https://blog.csdn.net/qq_38652871/article/details/92563791

版权

js 同时被 2 个专栏收录

52 篇文章

订阅专栏

web

9 篇文章

订阅专栏

见图
在这里插入图片描述

上代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin:0;
                padding:0;
                box-sizing: border-box;
            }
            .out-box{
                width:500px;
                height:450px;
                background:#fff;
                position:absolute;
                top:100px;
                left:100px;
                border:1px solid #000000;
            }
            .out-box>div{
                width:100%;
            }
            .top-box{
                height:calc(100% - 200px);
                overflow-y:scroll;
                background:#fff;
            }
            ul,ul li{
            }
            .move-line{
                width:100%;
                height:2px;
                position:absolute;
                bottom:200px;
                border:0;
                background:#f0f;
                cursor: ns-resize;
            }
            .bottom-box{
                background:#fff;
                height:200px;
                text-align:center;
                color:#ffffff;
            }
            .input-box{
                height:80%;
            }
            .btn-box{
                height:20%;
                display:flex;
                justify-content: flex-end;
                align-items: center;
                border-top:1px solid #000000;
            }
            .input-box #input{
                width:100%;
                height:100%;
                outline:none;
                border:none;
                padding:5px;
            }
            .btn-box .send-btn{
                outline: none;
                border:none;
                background: gold;
                padding:5px 15px;
                border-radius:5px;
                margin-right:15px;
            }
    </style>
    </head>
    <body>
        <div class="out-box" id="outBox">
            <div class="top-box" id="topBox">
                <ul>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                    <li>阿斯蒂芬解开了士大夫</li>
                </ul>
                <li>阿斯蒂芬解开了士大夫</li>
            </div>
            <hr id="line" class="move-line">
            <div class="bottom-box" id="botBox">
                <div class="input-box">
                    <textarea name="" id="input" cols="30" rows="10" placeholder="请输入内容"></textarea>
                </div>
                <div class="btn-box">
                    <button class="send-btn">发送</button>
                </div>
            </div>
        </div>
        <script>
            let moveFlag = false,
            lineObj = document.getElementById('line'),
            outObj = document.getElementById('outBox'),
            topObj = document.getElementById('topBox'),
            botBox = document.getElementById('botBox');
            let boxH = parseInt(getStyle(outObj,'height'));
            let maxH = 250,minH = 150;
            outObj.addEventListener("mousedown",function(e){
                if(e.target.id === 'line'){
                    moveFlag = true;
                }
            })
            outObj.addEventListener("mousemove",function(e){
                if(moveFlag){
                    let outY = outObj.getBoundingClientRect().y;
                    let y = e.clientY;
                    let bot = outY + boxH - y;
                    if(bot >minH && bot <maxH){
                        lineObj.style.bottom = bot+'px';
                        botBox.style.height = bot+'px';
                        topObj.style.height = `calc(100% - ${bot}px)`;
                    }
                }
            })
            document.addEventListener('mouseup',function(){
                moveFlag = false;
            })
            function getStyle(obj, attr) {
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return window.getComputedStyle(obj)[attr];
                }
            }
        </script>
    </body>
</html>