Whenever we use center block option in scrollintoview the entire page scrolls up. is there an alternative way to ensure that the latest message is always centered without causing the whole page to shift?

Using Streamlit
, ,
1 
 js_code = f"""
                                <script>
                                        var dummyVariable = {st.session_state.js_counter};
                                        console.log("Dummy Variable Value:", dummyVariable);
                                        function scrollToLatestMessage() {{
                                            var messages = parent.document.querySelectorAll('.st-emotion-cache-1c7y2kd');
                                            if (messages.length > 0){{
                                                messages[messages.length - 1].scrollIntoView({{ behavior: 'smooth', block: 'center', inline: 'end'}});
                                            }}
                                        }}
                                        scrollToLatestMessage();
                                    </script>
                                """
                        st.components.v1.html(js_code, height=0)