1

For my ReactJS project I have a simple text list (using <ul> and <li> tags), which has it's own scroll bar to navigate through the list, but not the whole page. I was able to do this with this css code:

    #List-container {
        max-height: 425px;
        overflow: hidden;
        overflow-y: scroll;
    }

For my project, I need it to automatically scroll down to the bottom of the list. I tried using window.scrollTo()but it's not working, which I'm pretty sure is because of the fact that there is a secondary scroll bar.

Does anyone know how I could use window.ScrollTo(), or know any alternatives?

Thanks in advance!

Ben10
  • 500
  • 1
  • 3
  • 14

2 Answers2

1

You need to get reference for the ListContainer and then set scrollTop on it like

<ListContainer ref={ref => this.listContainer = ref} />

and use it like

const container = ReactDOM.findDOMNode(this.listContainer);
container.scrollTop = "125px"
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • On the top line what does `this.listContainer` represent? – Ben10 May 08 '18 at 08:08
  • Its a ref to the ListContainer component, check this for more details https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele/38093981#38093981 – Shubham Khatri May 08 '18 at 08:10
  • So if I wanted to I could change `this.listContainer` to what ever name I want - as it's being defined in that line? Am I right? – Ben10 May 08 '18 at 08:13
  • @Ben10, you can give whatever name you want. – Shubham Khatri May 08 '18 at 08:14
  • Sorry for asking so many questions, but it's still not working. Am I setting the const `container` in the wrong part of the reactjs lifecycle or does it not matter?' – Ben10 May 08 '18 at 08:19
  • Where exactly are you getting the container, and when do you want to set scrollPosition, also are you getting any error – Shubham Khatri May 08 '18 at 08:48
  • I am not getting any error when I start the development server nor in the console. And for the scroll position I want it on button press. – Ben10 May 08 '18 at 08:53
  • For the container I'm not sure what you mean – Ben10 May 08 '18 at 08:54
  • In that case, you must call the function on button click in which you will set `this.listContainer.scrollTop = '125px'` – Shubham Khatri May 08 '18 at 08:58
1

I tried your code and I'm getting a scrollbar like it's supposed to.

To get something to automatically scroll to bottom I would do something like:

let wHeight = window.innerHeight;
window.scrollY = wHeight;

This is the simplest way I can think of to scroll to the bottom of the page. You can replace window with whatever you want to select in the DOM.

To instead scroll to the bottom of your list simply write:

let divHeight = document.getElementById('List-container');
window.scrollY = divHeight.offsetHeight;
MstrQKN
  • 836
  • 10
  • 28
  • 1
    Is there a more "Reactjs-ly" alternative to .getElementByID? It might just be me, but I feel .getElementByID doesn't really fit with ReactJS – Ben10 May 08 '18 at 08:57
  • There is, but I can't say if it's better or worse. getElementById is as close to the DOM as you can get when selecting an element. But with React you have "refs" where you can set for example
    and you can later select this with this.refs.myReactDiv. Hope this helps!
     – MstrQKN May 09 '18 at 09:44
  • Isn't `window.scrollY` just a `read-only` property? How can you modify it? – Gabriel Arghire Sep 22 '21 at 14:50