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

【问题标题】：how to reset scroll position in a div using javascript如何使用javascript重置div中的滚动位置
【发布时间】：2013-10-29 20:12:45
【问题描述】：

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

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

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

【问题讨论】：

_Please suggest me only with javascript_ 如果对最有趣的简化 js 库不感兴趣，则不应添加 jquery 标签。
我已经包含 jquery 标记 jsut 因为最大化视图并且你知道 jquery 是 Javascript 库。
那么你应该包含pron标签以及:p开个玩笑
f00bar，感谢您的建议：p
投反对票的人，请填写投反对票的原因:(

标签： javascript html css dojo

【解决方案1】：

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

window.scrollTo(0,0);

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

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

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

【讨论】：

shadow，这对我不起作用，我以前用过这个。谢谢
@anand4tech 你能装个小提琴吗
我的代码和逻辑有点复杂，无法在小提琴上向您展示。如果您可以根据我的要求为我提供任何参考。谢谢
设置 scrollTop 确实有效，但如果您的 div 在设置时被隐藏，它似乎不起作用。取消隐藏后将 scrollTop 设置为零。
除了上面@TimothyRyan 的建议外，还要确保您想要scrollTop 的div 具有overflow-y 属性。答案的作者也提到了这一点，但应该更多地强调它，因为它是一个潜在的陷阱

【解决方案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;

【讨论】：

不一定是你所在的DIV，但可能是你需要滚动的UL

【解决方案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');

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

【讨论】：