Topic: force scrollbar to Scroll to End
I have used Scrollbar for and each time a row is added, I need to scroll down in the list to show that row. Please advice how this is achievable?
<MDBRow className="scrollbar scrollbar-primary">
<MDBCol className="m-0 p-0 ">
<React.Fragment>
{/* --------------------< Loop >------------------------- */}
{this.CreateAndShowRows()}
{/* ------------------------------------------------------ */}
</React.Fragment>
</MDBCol>
</MDBRow>
CreateAndShowRows = () => {
return CurrentRows.map((RowCard, index) => (
<React.Fragment key={RowCard.Id}>
<MDBRow
id={"Row" + index.toString()}
key={"Row" + index.toString()}
>
{this.ShowItem(RowCard)}
</MDBRow>
</React.Fragment>
));
};
I tried to use:
componentDidUpdate() {
return (
<MDBSmoothScroll to={"Row" + Targetindex.toString()}>SCROLL!</MDBSmoothScroll>
);
}
But it doesn't work. Is there any function to call for this purpose like the function you have for showing notifications instead of using tag?
Thanks in advance
Can you try this code?
scrollTo(element) {
window.scroll({
behavior: 'smooth',
left: 0,
top: element.offsetTop
});
}
componentDidUpdate(){
let elements = document.querySelectorAll('.scrollbar * .row');
this.scrollTo(elements[elements.length-1]);
}
this is a simple function to smooth scroll to your item, just use this scrollTo(element)
Your regards, Konrad.
afshinshahpari@gmail.com commented 5 years ago
Thanks for your reply. I have a fix page that only part of the page has scrolling feature and I think your only works when the whole screen is going to scroll? As currently its not scrolling to last row at all. Thanks in advance for your advice
afshinshahpari@gmail.com commented 5 years ago
Using: elmnt.scrollIntoView(); instead of: this.scrollTo(elements[elements.length-1]);
solved my problem. Thanks
Konrad Stępień staff commented 5 years ago
It's good that the problem has been solved. If you have any problems or questions, I am here to help you.
Best, Konrad.
afshinshahpari@gmail.com commented 5 years ago
Its very nice of you
afshinshahpari@gmail.com commented 5 years ago
By The way I dont know why I get email notification for MDBJavascript update although I have MDBReact. Can you fix that?
afshinshahpari@gmail.com commented 5 years ago
@Konrad Stępień The problem that I have now is this:
After using this trick to show the newly added item in scrolling area , in a web page app, its fine but when using the app on mobile device that shows this scrolling area in the following vertical pages, the system automatically scrolls down to second page and the user has to come back again to previous page to continue his job.
Is there any other solution in order to solve the problem ?
Konrad Stępień staff commented 5 years ago
@afshinshahpari@gmail.com, Can you send me pictures or something, how it looks on PC and Smartphone?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.16.0
- Device: mac
- Browser: chrome
- OS: macos
- Provided sample code: No
- Provided link: No