Brady W Brady W - 4 months ago 38
HTML Question

HTML/CSS/Javascript Scrollable div won't scroll?

I have a simple webpage with a paragraph and a textarea inside of a div. When the two elements leave the div I want the user to be able to scroll up/down

My div has overflow set to auto, but when the elements leave the page the user is still not able to scroll

Code:

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

The auto-value of overflow tells the browser to automatic "decide" whether the content should be scrollable or not:

 overflow-y: auto;

If you want a div to "be scrollable" you need to tell your Browser this in your CSS:

overflow-y: scroll;

Edit: As mentioned in the Comments of this Answer here is your solution:

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: scrol;

}