scrollToBottom not scrolling to bottom

[chrismowbraylit]

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>
        );
    }
}

[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)

[darrenklein]

Hm, after having a few days to play around with this, it doesn't seem this this "hack" fix works consistently. Most of the time, it works fine, but other times, the list will stop scrolling most of the way down.

Anyway, it's good enough for me for now, but a real fix for this issue would be terrific. I would think it relates to #430, and it looks like they might try to patch it... so let's hope that PR comes soon!

[fisshy]

@darrenklein Let me look into it sometime this week and see if it's related.

[darrenklein]

@fisshy Thanks! And thanks so much for all of your hard work.

[darrenklein]

@fisshy You know what, I think that my problem is that I'm not using this behavior correctly - I'm calling scrollToBottom() if state.foo.length, but I'm calling it before the list is actually returned and state.foo is mapped into all of the li. I'll mess with this a little more, but I'm pretty confident that this is my bad. The OP's issue here is still worth investigating, but I would ignore my earlier suggestion.

[fisshy]

@darrenklein aha ok! Let me know how it works out! :)

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