时间戳

首页 > 解决方案 > 自动滚动到页面底部不起作用 [javascript]

javascript - 自动滚动到页面底部不起作用 [javascript]

问题描述

我正在尝试在我的网站上创建一个终端/控制台。我找到了使用 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;
}

标签： javascripthtmlcssscroll

解决方案

window您要定位的对象window是浏览器公开的对象，而不是终端窗口。

要滚动终端滚动条，您需要使用终端内的滚动条来定位元素。像这样：

document.querySelector(".terminalScreen").scrollTo(0, document.body.scrollHeight)

推荐阅读