JSFiddle - React, Tailwind, and code Playground

by junkoro

HTML

<div style="margin:16px;">
    <div class="title">コンソール</div>
    <div class="roundbox">
        <div id="console" class="console"></div>
    </div>
    <div style="margin-top:16px;">
        <button onClick="addLine();">行追加</button>
        <button onClick="clearConsole();">クリア</button>
    </div>
</div>

CSS

.title {
    font-family:sans-serif;
    font-size:16px;
    font-weight:bold;
    margin-bottom:8px;
}
.roundbox {
    border:solid #DFDFDF 1px;
    border-radius:4px;
    padding:14px;
    background-color:#FFF8DF;
}
.console {
    height:128px;
    overflow:auto;
    font-size:14px;
    color:#666;
}

JavaScript

var idx = 0;

function addLine() {
    idx++;
    var $console = $("#console");
    $console.append("<div>" + idx + "行目追加</div>");
    //ここで一番下にスクロールする
    $console.scrollTop($console.prop("scrollHeight"));
}

function clearConsole() {
    $("#console").empty();
}