scrollToBottom not scrolling to bottom

What I need Auto scroll through a table that is in a fixed container

What i’ve done I have a fixed height div (700px) containing a table of data. The height of the table is greater than the container and thus is scrollable (as planned). I wanted to auto scroll through the table contents using animateScroll.scrollToBottom(). This is not working 100%. The content of the div is scrolling but only for 700px of the content (so around 1/3). This is obviously something to do with the fixed height of the table but that cannot be changed>

Heres what I have

class LeaderBoard extends React.Component {
    componentDidMount = () => {
        scroll.scrollToBottom({
            containerId: "scrollContainer",
            duration: 3000,
            delay: 2000,
            smooth: "linear"
        });
    };
    render() {
        return (
            <Panel ref={this.tableContainer} id="scrollContainer">
                <Table>
                    <tbody>
                        {this.renderTableHeaders()} // generates th's
                        {this.renderTableRows()} / / generates tr's
                    </tbody>
                </Table>
            </Panel>
        );
    }
}

[AlGantori]

If my guess is correct don’t use the garbage scrolling methods from your framework here react, I have the same problem with framework ionic, instead use standard .scrollIntoView() it works nicely…

I set up two dummy hidden divs, top and bottom around my “content” like so

<div id="QV_Top">TOP</div> 
... your actual content here
<div id="QV_Bottom">BOTTOM</div>

then fixed my scroll helper methods like so:

finally the actual scroll to id follows:

[darrenklein]

EDIT: I don’t believe that this fix illustrates the correct use of the scrollToBottom() function, so I would advise ignoring what I’ve written here. Leaving it for posterity, though…

I experienced this issue as well - in my case, I was able to resolve it by wrapping the call to scrollToBottom in a setTimeout with the second argument set to 0. Not sure why that helps, but I’ve bumped into this sort of thing before in other situations… woo front end!

import React from 'react'
import { connect } from 'react-redux'
import { animateScroll } from 'react-scroll'
import BroadcastMessage from './broadcast-message'
import { mapStateToProps } from 'js/redux/util'
import styles from 'styles/app'

const scrollToBottom = () => {
	animateScroll.scrollToBottom({
		containerId: 'broadcast_message_list_container'
	})
}

const BroadcastMessagesList = ({ state }) => {
	if (state.foo.length) {
		setTimeout(() => {
			scrollToBottom()
		}, 0)
	}

	return (
		<div className={styles.list_container}>
			<ul id='broadcast_message_list_container'>
				{
					state.foo.map((message) => {
						return (
							<li key={messge.id}>
								<BroadcastMessage message={message} />
							</li>
						)
					})
				}
			</ul>
		</div>
	)
}

export default connect(mapStateToProps)(BroadcastMessagesList)