Topic: force scrollbar to Scroll to End free asked 3 years ago

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 ">

      {/* --------------------<  Loop >------------------------- */}


      {/* ------------------------------------------------------ */}

CreateAndShowRows = () => {
  return, index) => (
    <React.Fragment key={RowCard.Id}>
        id={"Row" + index.toString()}
        key={"Row" + index.toString()}

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

Konrad Stępień staff answered 3 years ago


Can you try this code?

scrollTo(element) {
    behavior: 'smooth',
    left: 0,
    top: element.offsetTop

  let elements = document.querySelectorAll('.scrollbar * .row');

this is a simple function to smooth scroll to your item, just use this scrollTo(element)

Your regards, Konrad. free commented 3 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 free commented 3 years ago

Using: elmnt.scrollIntoView(); instead of: this.scrollTo(elements[elements.length-1]);

solved my problem. Thanks

Konrad Stępień staff commented 3 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. free commented 3 years ago

Its very nice of you free commented 3 years ago

By The way I dont know why I get email notification for MDBJavascript update although I have MDBReact. Can you fix that? free commented 3 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 3 years ago, Can you send me pictures or something, how it looks on PC and Smartphone?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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