放大时如何防止div上移

时间：2019-08-22 21:36:27

标签： javascript html css responsive-design

所以对于初学者来说，这个问题似乎有点含糊，所以我将尽我所能描述我的情况。

我创建了一个HTML页面，该页面具有可调整的部分（左上，右上和下）。有分隔器可调节X轴（在顶部两个部分之间）和Y轴（在顶部和底部之间）。一切似乎工作正常，但是当我放大（使用键盘上的Command +）时，它将文本推入Y轴调整器上方的底部。

我希望文本包含在Y轴调整器下方的div中，并且永远不要在其顶部滑动（即使在调整屏幕大小或放大屏幕时也是如此）。

before i zoom in

上面的图像是放大之前的样子。请注意文本“元素3”如何在绿线（Y轴调整器）下方。

this is after i zoom in

上面的图像是放大后的样子。请注意文本“元素3”如何在绿线（Y轴调整器）上方升高。

该错误应该在HTML代码中，而不是JS中，但是出于很好的考虑，我包括了JS文件。

我在互联网上四处寻找解决方案，但空手而归。我已经尝试过通过包含适当的脚本标签来引导页面，但这并不起作用，还需要调整各种CSS样式。

html文件：

<!doctype html>
<head>
    <title>resizer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="Common.js"></script>
    <script type="text/javascript" src="resizer.js"></script>

    <style>
        .element{
            border: 1px solid #999999;
                    border-radius: 4px;
                    margin: 5px;
                    padding: 5px;
            }
    </style>
    <script type="text/javascript">
        function onresize() {
            var element1 = document.getElementById("element1");
            var element2 = document.getElementById("element2");
            var element3 = document.getElementById("element3");
            var ResizerY = document.getElementById("resizerY");
            ResizerY.style.top = element3.offsetTop - 15 + "px";
            var topElements = document.getElementById("topElements");
            topElements.style.height = ResizerY.offsetTop - 20 + "px";
            var height = topElements.clientHeight - 32;
            if (height < 0)
                height = 0;
            height += 'px';
            element1.style.height = height;
            element2.style.height = height;
        }
        function resizeX(x) {
            var element2 = document.getElementById("element2");
            element2.style.width =
                element2.parentElement.clientWidth
                + document.getElementById('rezizeArea').offsetLeft
                - x
                + 'px';
        }
        function resizeY(y) {
            var element3 = document.getElementById("element3");
            var height =
                element3.parentElement.clientHeight
                + document.getElementById('rezizeArea').offsetTop
                - y
            ;

            if ((height + 100) > element3.parentElement.clientHeight)
                return;//Limit of the height of the elemtnt 3
            element3.style.height = height + 'px';
            onresize();
        }
        var emailSubject = "Resizer example error";
    </script>
</head>
<body>

    <div id="rezizeArea" style="top=0; bottom=0; right=0; left=0; width:100%; height:100%; overflow:hidden; position: absolute;" class="element">
        <div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;">
            <div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;">
                Element 2
            </div>
            <div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div>
            <script type="text/javascript">
                resizerX("resizerX", function (e) {
                    resizeX(e.pageX + 25);
                });
            </script>
            <div id="element1" class="element" style="height:10px; overflow:auto;">
                Element 1
            </div>
        </div>
        <div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div>
        <script type="text/javascript">
            resizerY("resizerY", function (e) {
                resizeY(e.pageY + 25);
            });
        </script>
        <div id="element3" class="element" style="display: inline-block; height:100px; position:absolute; left: 0; bottom: 0; right:0;">
            Element 3
        </div> 
    </div>
    <script type="text/javascript">
        onresize();
    </script>
    <hr>

</body>
</html>

resizer.js：

function resizer(resizerID, mousemove, cursor) {
    consoleLog("resizer(" + resizerID + ")");
    var resizer = document.getElementById(resizerID);
    resizer.style.cursor = cursor;
    resizer.mousemove = mousemove;

    resizer.onmousedown = function (e) {
        try{
            consoleLog("resizer.onmousedown(e)");
            document.documentElement.addEventListener('mousemove', resizer.doDrag, false);
            document.documentElement.addEventListener('mouseup', resizer.stopDrag, false);
        } catch (e) {
            ErrorMessage("resizer.onmousedown(...) failed! Your browser does not support this feature. " + e.message);
        }
    }

    resizer.doDrag = function (e) {
        if (e.which != 1){
            consoleLog("mouseup");
            resizer.stopDrag(e);
            return;
        }
        //consoleLog("doDrag(e)");
        resizer.mousemove(e);
    }

    resizer.stopDrag = function (e) {
        consoleLog("stopDrag(e)");
        document.documentElement.removeEventListener('mousemove', resizer.doDrag, false);
        document.documentElement.removeEventListener('mouseup', resizer.stopDrag, false);
    }
}

function resizerX(resizerID, mousemove) {
    resizer(resizerID, mousemove, "e-resize");
}

function resizerY(resizerID, mousemove) {
    resizer(resizerID, mousemove, "n-resize");
}

Common.js：

function MessageElement(Message) {
    var element = document.getElementById('Message');
    if (element == null) {
        alert('ERROR: element Message == null. ' + Message);
        return;
    }
    if (element.innerHTML != Message)
    {
        //consoleLog('Message: ' + Message);
        element.innerHTML = Message + '<hr><div align="center"><input type="button" onclick="javascript: return MessageElement(\'\')" value="Close" style="margin-top:5px;" /></div>';
        if (Message == "")
            element.style.display = "none";
        else element.style.display = "block";
    }
}

function ErrorMessage(message, emailMe) {
    consoleError(message);

    //http://www.htmlhelp.com/reference/html40/entities/special.html
    var body;
    if (emailMe != false) {
        body = message;
        body = body.replace(/\n/g, "%0D%0A");
        body = body.replace(/ /g, "%20");
        body = body.replace(/"/g, "%22");
        body = body.replace(/&/g, "%26");
    }
    message = message.replace(/</g, '&lt;');
    message = message.replace(/>/g, '&gt;');

    message = message.replace(/\n/g, '<BR>');
    if (emailMe != false) {
        //http://www.rapidtables.com/web/html/mailto.htm
        if (typeof myEmail == 'undefined')
            myEmail = "XXX";
        message += "<BR><BR><a href=\"mailto:" + myEmail + "?subject=" + emailSubject + "&body=" + body + "\" >Email me about problem</a>"
    }
    MessageElement('<FONT style="color: red; background-color: white">ERROR: ' + message + '</FONT>');
}

function consoleLog(message) {
    try{
        console.log(message);//Do not works in WP
    } catch(e) {
    }
}

function consoleError(msg)
{
    try
    {
        console.error(msg);
    } catch(e) {
//      alert(msg);
    }
}

0 个答案:

没有答案
相关问题
最新问题