Description
While navigating on mobile browsers, I'm facing a challenge with keeping an element centered as I scroll due to the browser window minimizing. I've experimented with different solutions such as utilizing the react-scroll library and making adjustments to CSS properties. However, the element doesn't consistently stay centered when implementing these techniques.
Expected Behavior
I anticipate the centrally positioned element to remain in the middle of the viewport while scrolling down the page on mobile browsers.
Actual Behavior
At present, due to the nature of the mobile browser window, each section I visit is not vertically centered.
Code Samples
const scrollToID = (id) => {
// Close the drawer by changing status to false
closeDrawer();
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "center",
});
}