Member Avatar for sandy183

Hello!

I have a web application where status messages are displayed in a small area of screen. I need the text to scroll down to the last message as the status messages are being added. But only the first messages are shown and the user has to manually scroll down to get the rest of the messages.

Does anyone know how i can show the last messages automatically?

The messages are being generated by JavaScript and i used css for the scroll (overflow:auto)

Any help will be much appreciated.
Thanks!

  • 4 Contributors
  • 3 Replies
  • 134 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Ken Sharpe

Dani AI

Generated

A concise, reliable pattern for ’s status area is: ensure the container has a fixed height and overflow:auto, append the new message node, then move the scrollbar to the bottom. As and hinted, JavaScript is the right tool (avoid <marquee>; it is nonstandard). asked for code, so here are practical snippets and notes that handle timing, user scroll intent, and modern fallbacks.

Basic (works in all browsers):

const container = document.getElementById('statusArea');
// after appending a new message element:
container.scrollTop = container.scrollHeight;

Handle DOM timing (when using innerHTML or frameworks):

container.appendChild(msgNode);
// ensure layout happened, then scroll
requestAnimationFrame(() => {
  container.scrollTop = container.scrollHeight;
});

Only auto-scroll when the user is already at/near the bottom (so reading older messages isn't interrupted):

function isNearBottom(el, threshold = 50) {
  return el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
}

const stayAtBottom = isNearBottom(container);
container.appendChild(msgNode);
if (stayAtBottom) container.scrollTop = container.scrollHeight;

Alternatives and cautions:

  • element.scrollIntoView({ behavior: 'smooth', block: 'end' }) scrolls the last message into view and can be clearer when messages have varying heights.
  • element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }) is convenient but behavior:'smooth' is not supported in very old browsers—fall back to direct scrollTop assignment.
  • For automatic reactions to DOM changes, a MutationObserver can scroll when children are added.
  • If messages are inserted at the top or CSS uses flex-direction: column-reverse, reverse the logic (scroll to 0 or use scrollIntoView on the first child).
  • If updates come from React/Vue/Angular, call the scroll logic in the post-render lifecycle hook/effect so layout is settled.

These approaches cover timing, usability (don’t yank the scrollbar while a user reads), and cross-browser reality while avoiding deprecated tags.

Recommended Answers

All 3 Replies

Member Avatar for sreein1986

please send the code ...

Member Avatar for casper_wang

why not just use java to scroll it for you?
use a marque type script

Member Avatar for Ken Sharpe

Yeah, javascript can set the scroll bar location, look into that.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.