Autoscroll on ScrollPanel

UI Components for React
Post Reply
mheinz
Posts: 1
Joined: 23 Sep 2022, 21:45

23 Sep 2022, 21:48

I am trying to use a ScrollPanel like an output terminal where different logs populate the panel as events are triggered on the page. I want to know if there is a way to have the scroll bar dynamically keep to the bottom of the ScrollPanel as things are added to it? Below is a code snippet.

Code: Select all

import { ScrollPanel } from 'primereact/scrollpanel';
import { Button } from 'primereact/button'

export default function Output(props) {

  const handleClick = () => {
    props.setLogs([])
  }

  return (
    <div className="terminal">
      <ScrollPanel style={{width: '100%', height: '100%'}} >
        logs:
        {
          props.logs.length>0 &&
          props.logs.map( e =>
              <p> { e }</p>
            )
        }
      </ScrollPanel>
      <br />
      <Button onClick={handleClick}>Clear</Button>
    </div>
  );
}

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest