# Scroll HTML Div down automatically for new incoming lines

**URL:** <https://community.plotly.com/t/scroll-html-div-down-automatically-for-new-incoming-lines/9209>\
**Category:** Dash Python\
**Created:** [March 26, 2018, 12:31pm UTC](https://community.plotly.com/t/scroll-html-div-down-automatically-for-new-incoming-lines/9209 "2018-03-26T12:31:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gtg489p](https://avatars.discourse-cdn.com/v4/letter/g/ea666f/32.png) [@gtg489p](https://community.plotly.com/u/gtg489p)\
**Post date:** [March 26, 2018, 12:31pm UTC](https://community.plotly.com/t/scroll-html-div-down-automatically-for-new-incoming-lines/9209/1 "2018-03-26T12:31:39Z")

</div>

I have a div on my interface that is serving as a console style log window which provides detailed information about an ongoing complex calculation. Everything works fine, but the div does not auto scroll down to keep up with the new log lines coming in. The only workaround I am aware of is using javascript in this manner:

var objDiv = document.getElementById(“your\_div”);  
objDiv.scrollTop = objDiv.scrollHeight;

but I am not sure how to incorporate javascript into python dash code or if there is an easier method. Any insight would be very helpful.

Thanks,  
Nathan

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [March 26, 2018, 12:53pm UTC](https://community.plotly.com/t/scroll-html-div-down-automatically-for-new-incoming-lines/9209/2 "2018-03-26T12:53:24Z")

</div>

It’s possible to add JavaScript scripts to your app [as described in the user guide](https://dash.plot.ly/external-resources), however interacting with the DOM can be messy as React is controlling the DOM. I’m not sure if your situation falls into that category or not. In general, if you can do it with CSS alone, that’s going to be easier with Dash. Here’s [a stack overflow reply](https://stackoverflow.com/a/44051405/77533) that describes a way to do this with CSS flex-box.

Thinking a bit outside the box, would having your logs reverse sorted be an option? Then the default scroll position would show the tail of the logs.

---

<div class="post-metadata">

**Author:** ![gtg489p](https://avatars.discourse-cdn.com/v4/letter/g/ea666f/32.png) [@gtg489p](https://community.plotly.com/u/gtg489p)\
**Post date:** [March 26, 2018, 6:45pm UTC](https://community.plotly.com/t/scroll-html-div-down-automatically-for-new-incoming-lines/9209/3 "2018-03-26T18:45:56Z")

</div>

nedned, the CCS flex box trick worked wonderfully! Thank you so much.