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

Question

我正在尝试在我的网站上创建一个 terminal/console。我找到了使用 javascript 在页面上向下滚动的函数，它们是 window.scrollTo(0,document.body.scrollHeight); 和 window.scrollTo(0,document.querySelector(".fakeScreen").scrollHeight)。但是，我不能让它们都起作用。我把它们放在不同的地方；在我的 writeText 函数和我的每个函数的底部，但是 none 有效。

尝试一（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;
}

Answer 1

浏览器而不是终端公开的 window object you are targeting is the window 对象 window。

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

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

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

Automatic scroll to bottom of page doesnt work [javascript]

html

javascript

css

scroll