Search code examples
javascripthtmlcssdojo

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


Solution

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