Блог

Главная - Вопросы по программированию - Автоматическая прокрутка вниз страницы не работает [javascript]

Автоматическая прокрутка вниз страницы не работает [javascript]

#javascript #html #css #scroll

Вопрос:

Я пытаюсь создать терминал/консоль на своем веб-сайте. Я нашел функции для прокрутки страницы вниз с помощью javascript, которые являются window.scrollTo(0,document.body.scrollHeight); и window.scrollTo(0,document.querySelector(".fakeScreen").scrollHeight) . Однако я не могу заставить ни то, ни другое работать. Я разместил их в разных местах; в нижней части моей writeText функции и в каждой из моих функций, однако ни одна из них не сработала.

Витрина

Попытка первая (функция writeText):

 function writeText(data) {
    output.innerHTML  = `${data}<br>`;
    window.scrollTo(0,document.body.scrollHeight);
}

Попробуйте две (на каждой из моих функций):

 function whoami() {
    writeText(`
<br>
hi! i'm gxzs, bla bla bla..
<br>`)
window.scrollTo(0,document.body.scrollHeight);
}

Css (терминал, полоса прокрутки)

 .terminalScreen {
    background-color: #282828;
    opacity: 90%;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    width: 1500px;
    height: 800px;
    margin: 0 auto;
    padding: 20px;
    vertical-align: center;
}

.terminalScreen::-webkit-scrollbar {
    width: 12px;              
}

.terminalScreen::-webkit-scrollbar-track {
    background: #282828;        
}

.terminalScreen::-webkit-scrollbar-thumb {
    background-color: #141414;    
    border-radius: 15px;       
    border: 3px solid #282828;  
}
.terminalScreen .output {
    width: 100%;
    color: #fff;
    font-size: 14pt;
    font-family: 'Roboto Mono', monospace;
}

Комментарии:

1. Я не думаю, что ваша window переменная нацелена на элемент, у которого есть полоса прокрутки внутри терминала, а на window переменную браузера. Попробуйте что-нибудь вроде этого: ElementWithScrollbarInTheTerminal.scrollTo(0, document.body.scrollHeight) . ( Документы )

2. @ManasKhandelwal Спасибо, я понимаю, что происходит и как это работает сейчас. Но я все еще не знаю, какой элемент указать. Я добавил часть своего css для справки.

3. Попробуйте это: document.querySelector(".terminalScreen").scrollTo(0, document.body.scrollHeight) . Кроме того, будет лучше, если вы включите весь код, чтобы мы могли отлаживать, об этом трудно догадаться.

4. @ManasKhandelwal Спасибо, что отлично работает

5. Это здорово, просто добавил комментарии в качестве ответа только для дальнейшего использования другими. 😀

Ответ №1:

window Объект, на который вы нацелены, — это window объект, отображаемый браузером, а не окном терминала.

Чтобы прокрутить полосу прокрутки терминала, вам нужно нацелиться на элемент с полосой прокрутки внутри терминала. Подобный этому:

 document.querySelector(".terminalScreen").scrollTo(0, document.body.scrollHeight)
Метки: