Question

我有一个简单的网页，里面有一个段落和一个textarea。当两个元素离开div时，我希望用户能够向上/向下滚动

我的div已将溢出设置为自动，但当元素离开页面时，用户仍无法滚动

代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "brdstyle.css" />
    <title>BrD</title>
</head>

<script src = "brdapp.js"></script>

<body>
<div id = "background">
    <div id = "console">
        <p id = "consoletext"></p>
        <textarea rows = "1" id = "textinput" onkeydown = "checkInput();"></textarea>
    </div>
</div>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: rgb(0, 0, 0);
}

#background {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    margin: 0px;
    padding: 0px;
}

#console {
    margin: 0px;
    padding: 0px;
    overflow-y: auto;
}

#consoletext {
    color: rgb(255, 255, 255);
    font-family: Monospace;
    margin: 10px 10px 0px 10px;
    padding: 0px;
    word-wrap: break-word;
}

#textinput {
    resize: none;
    border: none;
    margin: 0px 10px 10px 10px;
    padding: 0px;
    outline: none;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-family: Monospace;
    width: calc(100% - 22px);
    overflow: hidden;
}

的Javascript

function checkInput () {
    var event = window.event || event.which;

    if (event.keyCode == 13) {
        event.preventDefault();
        addLine(document.getElementById("textinput").value);
        document.getElementById("textinput").value = "";
    }

    var newHeight = ((pageHeight - 20) - document.getElementById("consoletext").style.height);
    if (document.getElementById("textinput").style.height != newHeight) {
        document.getElementById("textinput").style.height = newHeight + "px";
    }
}

function addLine (line) {
    var newText = document.createTextNode(line);
    var newLineElement = document.createElement("br");
    document.getElementById("consoletext").appendChild(newText);
    document.getElementById("consoletext").appendChild(newLineElement);
}

Answer 1

溢出的自动值告诉浏览器自动＆＃34;决定＆＃34;内容是否应该可滚动：

 overflow-y: auto;

如果你想要一个div可以滚动＆＃34;你需要在你的CSS中告诉你的浏览器：

overflow-y: scroll;

修改正如本答案的评论中所提到的，这是您的解决方案：

CSS：

* { margin: 0px; padding: 0px; } body { background-color: rgb(0, 0, 0); } #background { position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%; background-color: black; margin: 0px; padding: 0px; } #console { margin: 0px; padding: 0px; height:100px; overflow-y: scroll; } #consoletext { color: white; background-color:black; font-family: Monospace; margin: 10px 10px 0px 10px; padding: 0px; word-wrap: break-word; } #textinput { resize: none; border: none; margin: 0px 10px 10px 10px; padding: 0px; outline: none; background-color: black; color: white; font-family: Monospace; width: calc(100% - 22px); overflow: scroll; }

HTML / CSS / Javascript Scrollable div不会滚动？

1 个答案: