流式滚动至结束页面

Question

任务是当您单击streamlit中的按钮时向下滚动页面。 它描述了如何实现这一点，但它不起作用 https://discuss.streamlit.io/t/how-can-i-use-an-auto-scroll-to-the-bottom-of-the-page/39650/10 我试试这个：

                st.session_state['dummy_counter'] += 1
                st.markdown(
                    """
                    <div id="end"></div>
                    """,
                    unsafe_allow_html=True
                )
                st.components.v1.html(f"""
                    <script>
                        console.log('check');
                        var count = {st.session_state['dummy_counter']};
                        var element = document.getElementById("end");
                        if (element)  {{
                            element.scrollIntoView({{behavior: "smooth"}});
                            console.log('check2');
                        }}
                    </script>
                """,height=1)

在浏览器中执行代码时，会发生滚动，但streamlite不起作用。 我想将页面滚动到结束元素，当我在控制台中输出时，结束元素会找到它，但是在阶段的streamlit'e中

var element = document.getElementById ("end"); 

返回元素= null。在浏览器中：

<div id="end"></div>

我设置了定时器，很明显这不是由于页面加载造成的。也许有更简单的解决方案？或者我的怎么修？谢谢

Answer 1

您的代码片段中遇到的问题是

component

创建了一个 iframe，并且无法使用

div

找到

id="end"

。

您可以看一下这个示例 https://gist.github.com/dtmilano/41a8c45d9e17c663bb970ab318cec96c，它应该让您了解如何克服这个问题。