Automatically scroll down a page ?

[matt-grain]

Hi,
Assuming my app is very similar to the Quizz example (https://quiz.pynecone.app/), is there a style trick to automatically anchor the view (or the scrollbar) to the bottom of the page (where the submit button is) especially is dynamically I'm adding quizz cards ?

Thanks !

[picklelo]

Hmm I'm not sure about this. If there's a way to do it in normal React is should be possible, but I don't have experience. We may need to include a third-party library like https://www.npmjs.com/package/react-scroll

[FHU-yezi]

By the way we need to add a on_scoll_bottom event to dynamic add content when user scoll to the bottom.

[simonmesmith]

@matt-grain I have a hack for you, if you're interested. Two steps:

1. Add aria_label="scrollme" (or whatever) to the area you want to scroll

pc.flex(
  ...
  overflow_y="scroll",
  aria_label="scrollme"
)

This will add "scrollme" to whatever div contains your scrolling content. Like this:

...
<div class="css-hhl8cq-scrollme">...</div>
...

2. Add this JavaScript to the bottom of your page

pc.html(
  """<script>
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].className.includes("scrollme")) {
            divs[i].addEventListener("DOMNodeInserted", function() {
                this.scrollTop = this.scrollHeight;
            });
        }
    }
  </script>"""
)

Note that:

• There may be a better way to get some kind of identifier into the box that requires scrolling, but "id" and "class" didn't work
• I'm no JavaScript expert, so there may be a more efficient way to do what I'm doing here