如何创建html滚动条？

Question

这个想法是创建一个 html 滚动条来实时接收日志。我正在使用FLASK，它对于创建网页非常有用，但到目前为止只知道处理该工具的网页的基础知识。

Answer 1

获取一些文字将其填充到元素中将元素滚动到底部// don't need this. It's to get the posts from the fake APIlet id = 0;// get a reference to the logs elementconst logs = document.getElementById("logs");// this takes some text, wraps in in a <pre> tag and returns the elementfunction makeLogEntry(str) {&nbsp; const el = document.createElement("pre");&nbsp; el.innerText = str;&nbsp; return el;}// This is just to tick up the post id and roll it back to 1 if we go over 100, since the fake api only has 100 postsfunction getId() {&nbsp; return ++id > 100 ? 1 : id;}function getPost(id) {&nbsp; fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)&nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; .then(json => {&nbsp; &nbsp; &nbsp; // wrap the log message in a tag and append it to the logs&nbsp; &nbsp; &nbsp; logs.append(makeLogEntry(json.title));&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // scroll the logs element to the bottom&nbsp; &nbsp; &nbsp; // see (https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div)&nbsp; &nbsp; &nbsp; logs.scrollTop = logs.scrollHeight;&nbsp; &nbsp; })}// fetch stuff every 2 secondssetInterval(() => getPost(getId()), 2000);#logs {&nbsp; width: 100%;&nbsp; height: 100px;&nbsp; border: 1px solid #ddd;&nbsp; overflow: scroll;}<div id="logs"></div>

Answer 2

fetch 您必须使用 javascript ，您的服务器应该提供数据。然后你使用 JS DOM 将数据放入你想要放置的容器中。然后，要启用滚动，您必须编写一个包含区域大小和规则的 css overflow-y:scroll文件。