CODEWITHSUNDEEP
htmlcssreactjsscroll
Ben10
Ben10

Reputation: 498

ReactJS - Window.ScrollTo() not working on secondary scroll bar

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!

Upvotes: 1

Views: 12630

Answers (2)

MstrQKN
MstrQKN

Reputation: 844

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;

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281864

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"

Upvotes: 1

Related Questions