setInterval(...) 没有响应视口高度的降低答案

【问题标题】：setInterval(...) is not responding to decrease in viewport heightsetInterval(...) 没有响应视口高度的降低
【发布时间】：2018-04-23 01:53:23
【问题描述】：

场景

我已经设置了三个简单的网页，其内容应始终保持垂直和水平居中在浏览器的视口上，尽管在页面刷新之间视口的大小发生了变化。我使用 W3C.org 的条目 "Centering Things" 来获取水平和垂直居中的帮助。我正在 Chrome 和 Safari 的开发者工具的帮助下测试代码。

问题

当我加载 index.php 页面时，页面内容最初是居中的，这是应该的。当我更改视口的宽度或水平值时，浏览器会通过不断地重新水平居中页面内容来做出响应。当我增加视口的高度或垂直值时，浏览器也会通过不断地重新垂直居中页面内容来做出响应——到目前为止一切都很好。但是当我减小视口的高度时，body元素的高度并没有改变，页面内容仍然固定在body元素高度值的最后一个垂直位置最大的。

视口高度减小得越多，页面及其内容的可滚动部分就越大（根本不应该有可滚动部分）。 [但是，如果您要刷新页面，您会发现页面内容重新以当前视口尺寸为中心。只要您不刷新页面然后尝试降低视口的高度，就会出现问题。] 再次增加视口的高度时，页面内容保持不变，直到视口的高度值匹配并且超过了 body 元素的高度值，此时浏览器会通过不断地重新垂直居中页面内容来做出响应，这是它应该做的。

尽管我之前曾多次实施过这种结构，但直到现在我还没有遇到过这种问题。在我遇到这个问题之前，我对浏览器有不同的挫败感。浏览器没有反映对 CSS 所做的更改，此时我绕过了浏览器的缓存。我能够摆脱挫败感，但其后果可能与当前的问题有关。

.js 用于所有三个页面

更新的.js

$(function() {



var viewportWidth = $( window ).width();
var viewportHeight = $( window ).height();
$( "body" ).css({
    width: viewportWidth,
    height: viewportHeight
});

$( window ).resize(function() {

    viewportWidth = $( window ).width();
    viewportHeight = $( window ).height();
    $( "body" ).css({
        width: viewportWidth,
        height: viewportHeight
    });

});



});

原始.js

$(function() {



var viewportWidth = $( window ).width();
var viewportHeight = $( window ).height();

$( "body" ).css({
    width: viewportWidth,
    height: viewportHeight
});

setInterval(function() {

    viewportWidth = $( window ).width();
    viewportHeight = $( window ).height();

    $( "body" ).css({
        width: viewportWidth,
        height: viewportHeight
    });

}, 10);



});

index.php

<!DOCTYPE>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Home</title>
    <link href="css/laptop-index.css" rel="stylesheet">
</head>

<body>
    <div id="container">
        <div id="register"><a href="pages/register.php">Register</a></div>
        <div id="login"><a href="pages/login.php">Login</a></div>
    </div>

    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/jsindex.js"></script>
</body>

</html>

index.php 的 CSS

body {
    margin: 0;
    padding: 0;
    position: relative
}

#container {
    position: absolute;

    margin: 0;
    padding: 0;

    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#container div {
    display: inline-block;
    padding: 10px 20px 10px 20px;
    background-color: #FFFFFF;
    border: 1pt solid black
}
    #register {
        margin-right: 50px
    }

    #register:hover, #login:hover {
        background-color: #AAFFFF
    }
        #container div a {
            color: black;
            text-decoration: none
        }
            #container div a:hover {
                color: blue
            }

register.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Registration</title>
    <link href="../css/laptop-register.css" rel="stylesheet">
</head>

<body>
    <form action="$_SERVER[PHP_SELF]" id="form" method="post">
        <input name="my_firstname" placeholder="Your first name" type="text">
        <input name="my_lastname" placeholder="Your last name" type="text">
        <br>
        <input name="my_address" placeholder="Your street address" type="text">
        <input name="my_address" placeholder="Your street address continued" type="text">
        <input name="my_city" placeholder="Your city" type="text">
        <input name="my_state" placeholder="Your state" type="text">
        <input name="my_zip" placeholder="Your zip" type="text">
        <input name="my_country" placeholder="Your country" type="text">
        <br>
        <input name="my_phone" placeholder="Your phone number" type="tel">
        <input name="my_email" placeholder="Your email" type="text">
        <br>
        <input name="my_username" placeholder="Your username" type="text">
        <input name="my_password" placeholder="Your password" type="password">
        <br>
        <textarea cols="50" name="my_message" placeholder="Your message" rows="5" type="text"></textarea>
        <br>
        <input type="submit" value="register">
    </form>

    <div id="back_button"><a href="../index.php">Return to Home Page</a></div>

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/register.js"></script>
</body>

</html>

login.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Login</title>
    <link href="../css/laptop-login.css" rel="stylesheet">
</head>

<body>
    <form action="$_SERVER[PHP_SELF]" id="form" method="post">
        <input name="my_username" placeholder="Your username" type="text">
        <input name="my_password" placeholder="Your password" type="password">
        <br>
        <input type="submit" value="login">
    </form>

    <div id="back_button"><a href="../index.php">Return to Home Page</a></div>

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/login.js"></script>
</body>

</html>

register.php 和 login.php 的 CSS

body {
    margin: 0;
    padding: 0;
    position: relative
}

#form {
    position: absolute;

    margin: 0;
    padding: 0;

    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

#back_button a {
    color: black;
    text-decoration: none
}
#back_button a:hover {
    color: blue
}

【问题讨论】：

您应该真正考虑将“调整大小”事件处理程序绑定到窗口以处理浏览器窗口大小调整，而不是运行间隔每 10 毫秒。这太过分了。
您能否将您的示例转换为代码片段并提供您正在使用的 CSS？我的第一反应是你根本不需要在 JavaScript 中进行任何计算。
我已更新 .js 文件以包含 jQuery 的 .resize() 处理程序而不是 setInterval() 计时器，但我原来的问题仍然存在。 @Taplar
我已更新 .js 文件以包含 jQuery 的 .resize() 处理程序而不是 setInterval() 计时器，但我原来的问题仍然存在。 @ochi
我已经包含了 .css 文件。 @msanford

标签： javascript jquery google-chrome caching resize

【解决方案1】：

你真的应该只使用 CSS，因为这正是 CSS 的用途。查看this great guide，了解如何在 CSS 中居中。

您可能还想使用 CSS 中的“vh”和“vw”单位来根据视口大小调整大小。

【讨论】：

【解决方案2】：

你们都说得对，我根本不需要任何 JS。实际上，JS实际上是导致问题的原因。离开 JS 并更改 CSS（如下）会导致其他奇怪的事情发生。我不知道为什么我认为我需要依靠它来进行持续的水平和垂直居中，所以我完全放弃了它。在搞砸了一点之后，这是我可以摆脱的最小 CSS：

body-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

以下所有内容似乎也适用于上述内容：

body { height: 100% }

body {
    height: 100%;
    position: relative
}

html { height: 100% }

html { height: 100% }
body { height: 100% }

html { height: 100% }
body {
    height: 100%;
    position: relative
}

【讨论】：