How to create html scroll?

Question

The idea would be to create an html scroll that would receive the logs in real time. I'm using FLASK, it is very good for creating web pages, but so far only know the basics of web pages handling this tool.

I don't quite understand what you are asking. Do you want flask to receive errors in a log from your webpage? Or are you trying to have flask handle scrolling on your web page? — Marco Chavez, Aug 28 '20 at 19:11
I'm trying to create a scroll on the html page that reads in real time the result of a variable. — Nevrs, Aug 28 '20 at 19:20

score 1 · Accepted Answer · answered Aug 28 '20 at 19:51

Get some text
Stuff it in an element
Scroll the element to the bottom

// 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;
}

<div id="logs"></div>

score 0 · Answer 2 · answered Aug 28 '20 at 19:16

you have to fetch data from your server using javascript fetch https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch or XMLHttpRequest https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest . your server should serve the data. then you use JS DOM to put the data in the container where you want to put it. Then, to enable scrolling you have to write a css file with the size of the area, and the overflow-y:scroll rule https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

How to create html scroll?

2 Answers2