Trigger Dash Callback from scroll (overflow div)

Dash Python
3

Thank you so much, it actually worked. Nowhere I found a solution to triggering a Dash Callback from Javascript.
Here is the full solution:

#add virtualization based on scroll
@app.callback(
    Output('table', 'n_clicks'),
    Input('scrollpos', 'children')
)
def virtualization_table(scroll):
    print("scroll:")
    print(scroll)
    return None

app.clientside_callback(
    """
    function(n) {
        var obj = document.getElementById('scrollpos');
        var scrollpos = obj.innerHTML;
        console.log('scrollpos: ' ,scrollpos)
        console.log('n_clicks:', n)
        return scrollpos;
    }
    """,
    Output('scrollpos', 'children'),
    Input('scroll_btn', 'n_clicks')
)

and in the js file:

const checkElement = async selector => {
    while ( document.querySelector(selector) === null) {
        await new Promise( resolve =>  requestAnimationFrame(resolve) )
    }
    return document.querySelector(selector);
};

checkElement('#table').then((selector) => {
  console.log(selector);
  var obj = document.getElementById('scrollpos');
  selector.addEventListener('scroll', function() {
    obj.innerHTML = selector.scrollTop
    console.log('Current scroll value: ', selector.scrollTop);
    
    document.getElementById('scroll_btn').click(); // trigger click event on hidden button
  });
});
2 Likes