css - How to stop scrollbar from auto scrolling when component updates

Question

I am using this library https://www.npmjs.com/package/react-perfect-scrollbar the scroll bar is set up around a comment section where new comments are shown at the top. When a new comment is added to the top of the component it updates and the scroll bar automatically goes to the bottom of the component. Any idea how i can stop it from updating it's position when the component updates?

here's how the section of the function that sets up the container is set-up, children object contains the list which is managed in a different component.

  const Container: FC<HTMLAttributes<HTMLDivElement>> = useCallback(
    props =>
      match ? (
        <PerfectScrollbar className={classes.scrollContainer} {...props} />
      ) : (
        <div className={classes.staticContainer} {...props} />
      ),
    [match]
  )

  return (
    <Grid item {...gridProps} classes={{ item: classNames({ [classes.gridScroll]: match }) }}>
      <Container>{children}</Container>
    </Grid>
  )

below is the css for classes.scrollContainer and classes.gridScroll

    scrollContainer: {
      padding: spacing(1),
      paddingTop: spacing(4),
      height: '100%'
    },
    gridScroll: {
      height: '100%',
      '&:last-child': {
        '& $scrollContainer': {
          paddingBottom: spacing(4)
        }
      }
    },

I am trying to get it to not scroll to the bottom when the component is updated.

Thank You

question from:https://stackoverflow.com/questions/65834509/how-to-stop-scrollbar-from-auto-scrolling-when-component-updates

Answer 1

Waitting for answers