元素设为display:none时scrollTop存储位置及Polymer弹窗滚动重置问题

问题1：当元素被设置为display: none时，浏览器会将scrollTop信息存储在什么位置？ #

其实浏览器并没有一个专门的“存储容器”来单独保存scrollTop值。当元素被设置为display: none时，它会从页面的渲染树中被移除，但DOM节点本身并没有被销毁——浏览器会把这个元素的几何状态（包括滚动位置这类属性）保留在其内部的隐式状态中。等你把元素重新设置为可见（比如display: block）时，浏览器会自动恢复这些之前保留的状态，这是浏览器为了提升用户体验默认做的事情。

问题2：Polymer paper-dialog内滚动div重新打开时恢复滚动位置，如何重置为0？ #

这个问题就是上面提到的浏览器默认行为导致的：paper-dialog关闭时只是把自身（包括内部的滚动div）设置为不可见，DOM节点并没有被移除，所以浏览器保留了滚动div的scrollTop值，重新打开时就自动恢复了。要解决这个问题，你只需要在对话框关闭的时机主动把滚动div的scrollTop重置为0即可。

具体实现步骤 #

1. 确保你能通过ID获取到目标对话框和内部的滚动div；
2. 监听paper-dialog的iron-overlay-closed事件——这个事件会在对话框完全关闭后触发，是重置滚动位置的最佳时机。

示例代码

假设你的元素结构如下：

<paper-dialog id="myDialog">
  <div id="scrollableContent" style="overflow-y: auto; max-height: 400px;">
    <!-- 你的滚动内容 -->
  </div>
</paper-dialog>

你可以在Polymer元素的脚本里添加事件监听和重置方法：

ready() {
  super.ready();
  // 绑定对话框关闭事件
  this.$.myDialog.addEventListener('iron-overlay-closed', this.resetScroll.bind(this));
}

resetScroll() {
  // 把滚动div的scrollTop设置为0
  this.$.scrollableContent.scrollTop = 0;
}

或者用更符合Polymer习惯的HTML事件绑定写法：

<paper-dialog id="myDialog" on-iron-overlay-closed="resetScroll">
  <div id="scrollableContent" style="overflow-y: auto; max-height: 400px;">
    <!-- 你的滚动内容 -->
  </div>
</paper-dialog>

对应的脚本方法：

resetScroll() {
  this.$.scrollableContent.scrollTop = 0;
}

这样每次对话框关闭时，滚动位置都会被重置为0，下次打开时自然就从顶部开始了。

内容的提问来源于stack exchange，提问作者Zoran Sumadinac