Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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!
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;
                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 8, 2018 at 8: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 <div ref="myReactDiv"> and you can later select this with this.refs.myReactDiv. Hope this helps!
– MstrQKN
                May 9, 2018 at 9:44
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"
                Its a ref to the ListContainer component, check this for more details stackoverflow.com/questions/38093760/…
– Shubham Khatri
                May 8, 2018 at 8: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 8, 2018 at 8:13
                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 8, 2018 at 8:19
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.