force scrollbar to Scroll to End

Topic: force scrollbar to Scroll to End

afshinshahpari@gmail.com free asked 5 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 ">
    <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

Add comment

Konrad Stępień staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

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 free 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 free 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 free commented 5 years ago

Its very nice of you

afshinshahpari@gmail.com free 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 free 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?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

afshinshahpari@gmail.com

100Support score
16Questions 2Answers 1Snippets