javascript - 如何使用javascript重置div中的滚动位置

Question

我正在开发一个移动混合应用程序。

在我的 html 页面中，我有 3 个选项卡。单击选项卡时，可滚动 div 的内容会发生变化。我的问题是当我向下滚动 div （视图）的内容并单击另一个选项卡时，内容消失了（但内容在那里）。请帮助我，以便我可以在单击任何选项卡时重置 div 滚动位置。

请仅使用 JavaScript 或 CSS 给我建议，而不是使用 JQuery，因为我没有使用 JQuery 库。

Answer 1

没有看到代码，我只能猜测。如果你想重置滚动位置，你可以简单地使用

window.scrollTo(0,0); 

将此代码添加到您的每个选项卡单击功能中，以便当您单击任何选项卡时，它会重置为顶部。

如果您有任何具有溢出属性的特定 div

var myDiv = document.getElementById('specificDiv');
myDiv.scrollTop = 0;

Answer 2

这很容易

 <div id="test" style="height:150px; width:600px;overflow-y:auto;background-color:gray;">
     <div style="width:150px;height:500px; background-color:green;"></div>
 </div>

document.getElementById('test').scrollTop =0;

Answer 3

最后这对我有用

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');

在视图之间转换后调用此函数，将重置我的滚动位置。