Dash callback element scrolling

user_7557018 0
Viewed 1093

I have a Dash app where I want element scrolling like:

<div id="scrollhere"></div>
<a href="#scrollhere"></a>

I want to use a callback instead of the <a> element. For example:

@app.callback(
    Output('url', 'pathname'),
    [Input('map', 'clickData')]
)
def map_click_callback(clicked):
    if not clicked:
        raise PreventUpdate

    return "#scrollhere"

Is this possible?

plotly-dash python
1 Answers

I had a similar problem and solved it with a clientside callback, not exactly but similar to this:

app.clientside_callback(
    """
    function(clicks, elemid) {
        document.getElementById(elemid).scrollIntoView({
          behavior: 'smooth'
        });
    }
    """,
    Output('garbage-output-0', 'children'),
    [Input('button-to-scroll', 'n_clicks')],
    [State('target-element', 'id')]
)

garbage-output-0 here is just because Dash demands you to have something as an Output. Im pretty sure there must be a better way of doing it though, for example creating a component that executes a JS code similar to the one I posted, but that can be called from the serverside.

user_114836740
Related