Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

How can I force scroll to element? - Dash Custom Component

Hi,

I have an app that has several components and after clicking a button a datatable is inserted. This element does not fit in the window and, thus, the user has to scroll manualy to see the datatable. I would like that to be done authomatically and not by the user.

As I didn’t see anything already created that could do what I want, I am trying to create a custom component that it is inserted with the datatable (after it) and force the user’s window to scroll to that element.

What I have achieved is to create an element that if it is already in the python-Dash code the window is scrolled to it BUT i cannot manage to force the window to scroll to it when it is inserted later with the button.

Can someone give me a hand?

This is the React code that im using:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

export default class ScrollDragger extends Component {
    componentDidMount(){
        //window.scroll(0,document.body.scrollHeight);
        const offsetTop = this.refs.col.offsetTop;
        window.scroll(0,offsetTop);
    }
    render() {
        const {id} = this.props;
        return (
            <div id={id} ref="col">
            </div>
        );
    }
}

ScrollDragger.propTypes = {
    /**
     * The ID used to identify this component in Dash callbacks
     */
    id: PropTypes.string
};

Do you create the callback for that component also when the datatable is created? Dash requires that all callbacks are registered before the app is started (otherwise refresh is required what does not happen very often in one-page).