javascript - 在具有最大高度的子元素中自动滚动

Question

我正在尝试为我的网站创建一个类似于控制台/终端的元素。

基本上，我希望用户输入命令并给出输出。生成输出时，它可能是几行信息。

因此，当显示新输出时，我想自动向下滚动到“new-output”元素。

<div class="container center">
<form class="about-form">
    <input type="text" class="about-input">
</form>
<div class="terminal">
    <div class="terminal-bar"><span class="title">info ><span class="terminal-height">terminal</span></span>
    </div>
    <p class="prompt">Name: Ruan Kranz</p>
    <p class="prompt">ROLE: full stack web developer</p>
    <p class="prompt">Level: 5+ years experience</p>
    <p class="prompt">Personality: Curious, passionate, analytical</p>
    <p class="prompt">Skills: Back-end, Front-end, DevOps, Scripting, Design</p>
    <p class="prompt">Interests: Coding, gaming, bitcoin, travel, reading, learning</p>
    <p class="prompt"></p>
    <p class="prompt">Type the words above ^1000</p>
    <p class="prompt">To leave type "exit" ^1000</p>
    <p class="prompt">Type "HELP" for a list of commands ^1000</p>
    <p class="prompt output new-output"></p>
</div>

我用 velocity.js 做这件事

$('.new-output').velocity(
    'scroll'
), {
    duration: 100
}

如果 .terminal 不在具有最大高度的容器中，此功能将完美运行。

.center 容器有以下 CSS

 .center {
    margin: auto;
    max-width: 800px;
    min-height: 400px;
}

还有.terminal

 .terminal {
     position: relative;
     display: block;
     margin: auto;
     border-radius: 10px;
     box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 70px;
     clear: both;
     max-height: 400px;
     overflow-x: hidden;
     overflow-y: visible;
 }

为什么在使用固定高度的容器时尝试向下滚动用户时它不起作用，我怎样才能达到预期的结果？我不想改变元素的高度(或大小)，但我想在生成新输出时向下滚动用户。

Answer 1

您可以使用 javascript 来实现这一点。

<div class="container center">
<form class="about-form">
    <input type="text" class="about-input">
</form>
<div class="terminal">
    <div class="terminal-bar"><span class="title">info ><span class="terminal-height">terminal</span></span>
    </div>
    <p class="prompt">Name: Ruan Kranz</p>
    <p class="prompt">ROLE: full stack web developer</p>
    <p class="prompt">Level: 5+ years experience</p>
    <p class="prompt">Personality: Curious, passionate, analytical</p>
    <p class="prompt">Skills: Back-end, Front-end, DevOps, Scripting, Design</p>
    <p class="prompt">Interests: Coding, gaming, bitcoin, travel, reading, learning</p>
    <p class="prompt"></p>
    <p class="prompt">Type the words above ^1000</p>
    <p class="prompt">To leave type "exit" ^1000</p>
    <p class="prompt">Type "HELP" for a list of commands ^1000</p>
    <p id = "output-prompt" class="prompt output new-output"></p>
</div>

并在 javascript 中使用它。

window.location = window.location + '#output-prompt';

或

document.getElementById('output-prompt').scrollIntoView({
  behavior: 'smooth'
});

希望这对您有所帮助!