在具有最大高度的子元素中自动滚动
Automatic scrolling in child element with max-height
我正在尝试为我的网站创建一个类似 console/terminal 的元素。
基本上,我希望用户输入命令并给出输出。生成输出时,它可能是几行信息。
所以当显示新输出时,我想自动向下滚动到 "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 不在具有最大高度的容器中,此功能将完美运行。
我有以下 CSS 用于 .center 容器
.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;
}
为什么在使用固定高度的容器时尝试向下滚动用户时它不起作用,我怎样才能达到预期的结果?我不想改变元素的高度(或大小),但我想在生成新输出时向下滚动用户。
您可以利用 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'
});
希望对您有所帮助!!
您可以将以下 css class 添加到 div/p 标签中,您希望在输出中添加滚动条。
.scroll
{
float:left;
overflow-y: auto;
height: 460px;
}
我从这个问题的解决方案中得到了它:link
var $container = $('div'),
$scrollTo = $('#row_8');
$container.scrollTop(
$scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);
// Or you can animate the scrolling:
$container.animate({
scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});
我正在尝试为我的网站创建一个类似 console/terminal 的元素。
基本上,我希望用户输入命令并给出输出。生成输出时,它可能是几行信息。
所以当显示新输出时,我想自动向下滚动到 "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 不在具有最大高度的容器中,此功能将完美运行。
我有以下 CSS 用于 .center 容器
.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;
}
为什么在使用固定高度的容器时尝试向下滚动用户时它不起作用,我怎样才能达到预期的结果?我不想改变元素的高度(或大小),但我想在生成新输出时向下滚动用户。
您可以利用 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'
});
希望对您有所帮助!!
您可以将以下 css class 添加到 div/p 标签中,您希望在输出中添加滚动条。
.scroll
{
float:left;
overflow-y: auto;
height: 460px;
}
我从这个问题的解决方案中得到了它:link
var $container = $('div'),
$scrollTo = $('#row_8');
$container.scrollTop(
$scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);
// Or you can animate the scrolling:
$container.animate({
scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});