How to set scrollbar position

Dash Python
1

I have designed a chatbot conversition page, but i don’t konw how to set scrollbar at the bottom of a div element, anyone can help me, thanks.

2

Hello!

The position of a scrollbar can be set dynamically using JavaScript. For example, take a look at the following Dash app and JavaScript file (located in a folder called “assets” at the same filesystem level as the Dash app)

# app.py
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(
    __name__,
)


app.layout = html.Div([
    html.Div([
        html.Div(dcc.Slider(
            min=0,
            max=100,
            value=65,
            tooltip={'always_visible':True, 'placement':'bottom'}
        ),
        style=dict(height=100))
    ]*5,
    style=dict(maxHeight=300, overflowX='scroll'), id="scroll-div")
])


if __name__ == '__main__':
    app.run_server(debug=True)

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

checkElement('#scroll-div').then((selector) => {
  console.log(selector);
  var obj = document.getElementById('scroll-div');
  obj.scrollTop = obj.scrollHeight;
});

The checkElement function makes sure that the div in question loaded in the DOM. Then, we set the scrollTop CSS property of that div equal to its scrollHeight property.

I hope that helps answer your question!

1 Like