Автоматическая прокрутка в дочернем элементе с max-height - PullRequest
Новая
       29

Автоматическая прокрутка в дочернем элементе с max-height

0 голосов
/ 15 октября 2018

Я пытаюсь создать элемент, похожий на консоль / терминал для моего веб-сайта.

terminal

В основном, я хочу, чтобы пользователи вводили команды идать вывод.Когда вывод генерируется, это может быть пара строк информации.

Поэтому, когда отображается новый вывод, я хочу автоматически прокрутить вниз до элемента «новый вывод». 

<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>

Я делаю это с помощью speed.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;
 }

Почему это не работает, когда я пытаюсь прокрутить пользователя вниз при использовании контейнера с фиксированной высотой, и как я могу достичь желаемого результата?Я не хочу, чтобы высота (или размер) элементов изменялась, но я хочу прокрутить пользователя вниз при создании нового вывода.

Ответы [ 3 ]

0 голосов
/ 15 октября 2018

вы можете добавить следующий класс css в тег div / p, где вы хотите, чтобы свиток был добавлен в вывод. 

.scroll
{
float:left;
overflow-y: auto;
height: 460px;
}
0 голосов
/ 15 октября 2018

Я получил его на основе решения этих вопросов: ссылка 

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()
});​
0 голосов
/ 15 октября 2018

Вы можете использовать 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'
});

Надеюсь, это поможет!!

...