Question

在您（读者）花费任何时间帮助我并了解我在做什么错之前，请先感谢您。我是JS和HTML的新手，并且正在通过互联网进行自我教学，因此请耐心等待。我可能只是不够了解，对于比我了解更多的人，答案是显而易见的。：）

我正在尝试使用自定义HTML命令行制作一个简单的（目前）基于命令行的“黑客模拟器”游戏。您可以在GitHub上查看我的完整代码（少于500行）：

https://github.com/qcontom/Hacking-Protocol

但是，我遇到了一个小问题，似乎无法在网上找到与我的项目相关的答案。我想让我的“终端”窗口在用户输入命令时自动滚动。我可以在网上找到最接近的功能：

const console = document.getElementById('terminal');

function scrollToBottom() {
    console.scrollTop = console.scrollHeight;
}

“终端”是我要自动滚动的HTML窗口。

我缺少什么或做错了什么导致程序无法滚动？任何帮助或对我可能错过的教程的指导，将不胜感激！

再次感谢您的宝贵时间！

Answer 1

如果您正在寻找类似的东西，我想这会有所帮助。它将与终端相同，将在按下Enter键并要求发出新命令时将重点放在textbox上。如果有帮助，您可以利用它。

$(".panel").on('keypress', ".in", function(e) {
    if (e.which == 13) {
        $(this).prop('readonly', true);
        var input = $(this).val().split(" ");
        if (input[1]) {
            var output = execute(input[0], input[1]);
        } else {
            var output = execute(input[0], "");
        }
        $(".output").last().html(output)
        $(".panel").append($("<div class='action'>").html("<div class='action'><div class='command'><span class='symbol'>$&nbsp;</span><input class='in' type='text'></div><div class='output'></div></div>"));
        $(".in").last().focus();
    }
});


function execute(command, parameters) {
    console.log(command, parameters);
    if (window[command]) {
        return window[command](parameters);
    } else {
        return "bash: " + command + " : command not found";
    }
}

$('.panel').stop().animate({
    scrollTop: $(".panel")[0].scrollHeight
}, 800);

.Terminal{
  background-color:black;
  color:lightgreen;
  width:300px;
  height:400px;
  overflow:scroll;
}
.Terminal panel{
  background-color:transparen;
  padding:10px;
  
}
.in{
  background-color:black;
  border:none;
  color:lightgreen;
}
.in:focus{
  outline:none;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: lightgreen;
    opacity: 1; /* Firefox */
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="Terminal">
  <div class="panel">
    <div class="action">
      <div class="command"><span class="symbol">$&nbsp;</span>
        <input class="in" type="text" placeholder="help" autofocus=""/>
      </div>
      <div class="output"></div>
    </div>
  </div>
    </div>
  
</body>
</html>

Answer 2

您需要为终端元素定义一个max-height，否则它将不起作用。为了使滚动平滑，请添加scroll-behavior: smooth;。

除非定义了max-height并且定义了属性overflow: auto|scroll，否则Elements不会创建自己的滚动条。并且，如果您的内容溢出。

没有max-height的元素会强制window创建滚动，因此您需要使用scrollTo对象中的window方法。除非定义了max-height并且定义了属性overflow: auto|scroll，否则Elements不会创建自己的滚动条。

另一种方法是滚动窗口，以防您的终端没有最大高度。为此用途：

window.scrollTo( {
  top: 300000,
  behavior: "smooth"
});`

function scrollToBottom() {
  el = document.getElementById('console');
  el.scrollTop = el.scrollHeight
  
  setTimeout( function() {
    window.scrollTo( {
      top: 300000,
      behavior: "smooth"
    });
  }, 1000 );
  
}

#console {
  max-height: 200px;
  margin: 20px;
  overflow: auto;
  border: 1px solid blue;
  scroll-behavior: smooth;
}
p {
   height: 500px;
}

#scroll {
  min-height: 2000px;
}

<div id="console">
  <button onclick="scrollToBottom()">Click Me</button>
  <p></p> <!--only to force scroll -->
</div>
<div id="scroll"></div>

HTML Javascript自动窗口滚动

2 个答案: