anand4tech anand4tech - 2 months ago 48
CSS Question

how to reset scroll position in a div using javascript

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).

So, please help me so that I could reset the position on clicking any tab.

Please suggest me only with JavaScript or CSS, not with JQuery as I am not using the JQuery library.

Answer

Finally this worked for me

function resetScrollPos(selector) {
  var divs = document.querySelectorAll(selector);
  for (var p = 0; p < divs.length; p++) {
    if (Boolean(divs[p].style.transform)) { //for IE(10) and firefox
      divs[p].style.transform = 'translate3d(0px, 0px, 0px)';
    } else { //for chrome and safari
      divs[p].style['-webkit-transform'] = 'translate3d(0px, 0px, 0px)';
    }
  }
}
resetScrollPos('.mblScrollableViewContainer');

Calling this function after transition between view ,will reset my scroll position.