如何创建html滚动？ [关闭]答案

【问题标题】：How to create html scroll? [closed]如何创建html滚动？ [关闭]
【发布时间】：2020-08-28 19:08:24
【问题描述】：

这个想法是创建一个可以实时接收日志的 html 滚动。我用的是FLASK，它非常适合创建网页，但目前只知道处理这个工具的网页基础知识。

【问题讨论】：

我不太明白你在问什么。你想让烧瓶在你的网页的日志中接收错误吗？或者你想让烧瓶句柄在你的网页上滚动？
我正在尝试在 html 页面上创建一个滚动，以实时读取变量的结果。

【解决方案1】：

获取一些文本
把它塞进一个元素中
将元素滚动到底部

// don't need this. It's to get the posts from the fake API
let id = 0;

// get a reference to the logs element
const logs = document.getElementById("logs");

// this takes some text, wraps in in a <pre> tag and returns the element
function makeLogEntry(str) {
  const el = document.createElement("pre");
  el.innerText = str;
  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 posts
function getId() {
  return ++id > 100 ? 1 : id;
}

function getPost(id) {
  fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(response => response.json())
    .then(json => {
      // wrap the log message in a tag and append it to the logs
      logs.append(makeLogEntry(json.title));
      
      // scroll the logs element to the bottom
      // see (https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div)
      logs.scrollTop = logs.scrollHeight;
    })
}

// fetch stuff every 2 seconds
setInterval(() => getPost(getId()), 2000);

#logs {
  width: 100%;
  height: 100px;
  border: 1px solid #ddd;
  overflow: scroll;
}

&lt;div id="logs"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您必须使用 javascript fetch https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch 或 XMLHttpRequest https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest 从您的服务器获取数据。您的服务器应该提供数据。然后你使用 JS DOM 将数据放在你想要放置的容器中。然后，要启用滚动，您必须编写一个具有区域大小的 css 文件，以及 overflow-y:scroll 规则 https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

【讨论】：