force scrollbar to Scroll to End


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


Konrad Stępień staff answered 5 years ago

Hi @afshinshahpari@gmail.com,

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?


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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
Tags