打开带backdrop的iron-overlay时如何禁止底层内容滚动？

我明白你的困扰——开启overlay后底层内容还能滚动，关闭后位置跳变确实很影响用户体验，而且你已经设置了Polymer.setPassiveTouchGestures(true);，没法直接用preventDefault()阻止事件，这就需要换个思路来处理。

下面是几个实用的解决方案，完全适配你的被动手势设置：

1. 通过CSS类动态锁定滚动 #

这是最通用的方法，核心是给底层滚动容器添加禁用滚动的样式，配合overlay的事件来切换：

首先定义一个CSS类：

.scroll-locked {
  overflow: hidden; /* 禁用桌面端滚动 */
  touch-action: none; /* 告诉浏览器不处理触摸滚动，完美适配被动手势 */
}

然后在你的Polymer元素里监听overlay的打开/关闭事件，动态添加/移除这个类：

ready() {
  super.ready();
  const overlay = this.$.yourOverlay; // 替换成你的overlay元素ID
  const bottomDiv = document.querySelector('.your-bottom-div'); // 替换成你的底层容器选择器

  overlay.addEventListener('iron-overlay-opened', () => {
    bottomDiv.classList.add('scroll-locked');
  });

  overlay.addEventListener('iron-overlay-closed', () => {
    bottomDiv.classList.remove('scroll-locked');
  });
}

2. 针对Polymer滚动元素的专属控制 #

如果你的底层滚动容器是Polymer自带的组件（比如paper-scroll-header-panel或iron-scroll-target-behavior实现的元素），可以直接用组件的属性来禁用滚动：

ready() {
  super.ready();
  const overlay = this.$.yourOverlay;
  const scrollPanel = this.$.bottomScrollPanel; // 你的滚动组件ID

  overlay.addEventListener('iron-overlay-opened', () => {
    scrollPanel.disabled = true; // 多数Polymer滚动组件支持disabled属性
  });

  overlay.addEventListener('iron-overlay-closed', () => {
    scrollPanel.disabled = false;
  });
}

3. 进阶优化：恢复滚动位置 #

为了彻底解决关闭overlay后的位置混淆问题，你可以在打开时记录当前滚动位置，关闭后恢复：

ready() {
  super.ready();
  const overlay = this.$.yourOverlay;
  const bottomDiv = document.querySelector('.your-bottom-div');
  let savedScrollTop = 0;

  overlay.addEventListener('iron-overlay-opened', () => {
    savedScrollTop = bottomDiv.scrollTop;
    bottomDiv.classList.add('scroll-locked');
  });

  overlay.addEventListener('iron-overlay-closed', () => {
    bottomDiv.classList.remove('scroll-locked');
    bottomDiv.scrollTop = savedScrollTop; // 回到之前的滚动位置
  });
}

这些方法都不会和Polymer.setPassiveTouchGestures(true);冲突，因为没有使用preventDefault()来阻止事件，而是通过CSS规则或组件属性从根源上禁用滚动，完美适配你的场景。

内容的提问来源于stack exchange，提问作者Sachin Naik