Reverse from bottom to top

[Ludea]

I populate a composant with message. The first message is set at the bottom of the component. The next message is set to the bottom, the previous is set above. When MessageContainer is full, I expect the scrollbar, but I don't see it, and cannot scroll. The normal populating work has expected.

        <div className={classes.Messagecontainer}>
        <PerfectScrollbar
        option={{suppressScrollX: true}}>
        <ul className={classes.message}>
        {listmessages.map((message) =>
        <Message login={JSON.parse(message).login} message={JSON.parse(message).message} />
        )
        }
        </ul>
        </PerfectScrollbar>
        </div>
);

Messagecontainer: {
    position: "relative",
    height: "85%",
    width: "100%",
    [theme.breakpoints.down("sm")]: {
    border: "1px solid black",
    height: "380px",
    marginLeft: "0"
    }
  },

message: {
  position: "absolute",
  bottom: '0'
}```

[goldenyz]

Does the length of "listmessages" increase asynchronously? Pls. refer to https://github.com/goldenyz/react-perfect-scrollbar#updatescroll

[Ludea]

yes, it increase on event (received message). The child component is Message with updatescroll ?

[goldenyz]

Just add a ref to PerfectScrollbar and call this._scrollBarRef.updateScroll(); when receive message

[Ludea]

return (
        <div className={classes.Messagecontainer}>
        <PerfectScrollbar ref={(ref) =>
        {this._scrollBarRef = ref; }}
        option={{suppressScrollX: true}}>
        <ul className={classes.message}
        onUpdateSize = {() =>
        { this._scrollBarRef.updateScroll(); }}>
        {listmessages.map((message) =>
        <Message login={JSON.parse(message).login} message={JSON.parse(message).message} />
        )
        }
        </ul>
        </PerfectScrollbar>
        </div>
);

Yes, but I have to add `updatescroll into Message component?

[twigs67]

Did you ever figure this out? updateScroll does not work.

[mrlaseptima]

why always close issues ? this problem not solved . you just wanna close issues.