HTML/CSS/Javascriptスクロール可能なdivはスクロールしませんか？

私は段落とdivの中にテキストエリアを持つ簡単なWebページを持っています。二つの要素は、私は、ユーザーがスクロールアップすることができるようにしたいのdivは/ダウンHTML/CSS/Javascriptスクロール可能なdivはスクロールしませんか？

ままにすると私のdivがautoに設定され、オーバーフローを持っていますが、要素がページを離れるとき、ユーザはまだ

をスクロールすることができませんコード：

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); 
}

出典

2016-07-09 Brady W

オーバーフローの自動値は、コンテンツがスクロールすべきか否か「を決める」自動にブラウザに指示：

overflow-y: auto;

あなたはdiv要素がしたい場合は"スクロール可能"であれば、ブラウザに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; 

}

出典

2016-07-09 18:43:40

[OK]をスクロールバーが現在示していますが、要素は、画面をオフに行くと、スクロールバーがアクティブになることはありません、ブラウザーのようにいくつかの要素しかないのでスクロールされるものはないと思うようです。 –

コンテンツをスクロール可能にする必要がないため、Fiddle：https://jsfiddle.net/pdyegy5u/を見てください。入力フィールドをスクロール可能にするには、 'overflow-y：scroll;'を設定する必要があります。あなたの入力要素 –

の場合、要素はこの場合divを離れることはありません。私があなたのコンテンツを見せても、要素がdivを離れてしまうと、問題をよく理解することができます –

HTML/CSS/Javascriptスクロール可能なdivはスクロールしませんか？

答えて

関連する問題