Menu
I am working on a mobile hybrid application.
In my html page, I have 3 tabs. When clicking a tab, the content of the scrollable div gets changed. My problem is when I scroll down the content of div (view) and click another tab, the content disappears (but the content is there). Please help me so I can reset the div scroll position when clicking any tab.
Please give me suggestions only with JavaScript or CSS, not with JQuery as I am not using the JQuery library.
380
To make div fixed scrolling to that div with CSS, we can use the position: sticky CSS property. position: -webkit-sticky; position: sticky; top: 0; z-index: 1; to set position to sticky and z-index to 1 to make the element with the sticky position show on top after we scroll to it.
Use the scrollTo() Method to Scroll to Top of Div in JavaScript. The scrollTo() method takes parameters to reset the viewport measurements. Usually, the current state of the viewport will have its position on the x-axis and y-axis.
If you want to set the scroll position of document. body , you can scroll the entire window altogether using window. scrollTo() ; it takes either a pair of coordinates (x,y) or an options object – if you just want to scroll nicely to the top, try window. scrollTo({top:0,behavior:'smooth'}); .
To make sure a scrolling Artboard stays in position when you click on a prototype Link, select the Link you're working with and enable the Maintain scroll position after click option in the PROTOTYPE tab of the Inspector.
Without seeing code, i can just guess. If you want to reset the scroll position you can simply use
window.scrollTo(0,0);
add this code to your each tab click functions so that when ever you click any tab, it resets to top.
If you have any specific div that has overflow property
var myDiv = document.getElementById('specificDiv');
myDiv.scrollTop = 0;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
