如何防止固定的div块触摸滚动答案

【问题标题】：How to prevent fixed div block touch scroll如何防止固定的div块触摸滚动
【发布时间】：2020-04-15 07:07:15
【问题描述】：

我有容器 div，它在内容溢出时创建滚动，作为内容的兄弟，我想放置一些位置固定的浮动按钮。

但是在移动设备上，容器 div 会阻止用户滚动，有没有办法解决这个问题？

我尝试过的事情：

pointer-event: none 有效，但用户将无法与固定 div 内的任何内容进行交互。
z-Index：不起作用
如果滚动区域是窗口则有效，但我需要它是内部滚动

请在移动视图（chrome devtool）中查看以下示例并尝试使用鼠标“触摸”滚动，注意如果您从红色区域开始滚动，它将不起作用

.container {
  overflow: auto;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  height: 2500px;
  background: lightgray;
}

.btn-container {
  position: fixed;
  bottom: 100px;
  padding:64px;
  width: 100%;
  display: flex;
  justify-content: center;
  background: red;
}

<div class="container">
  
  <div class="content">
    
  </div>
  <div class="btn-container">
    <button>button</button>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

pointer-events: none 有效，但用户将无法与固定 div 内的任何内容进行交互。

为子元素重置它：

.container {
  overflow: auto;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  height: 2500px;
  background: lightgray;
}

.btn-container {
  position: fixed;
  bottom: 100px;
  padding:64px;
  width: 100%;
  display: flex;
  justify-content: center;
  background: red;
  pointer-events: none
}
.btn-container>* {
  pointer-events: initial;
}

<div class="container">
  
  <div class="content">
    
  </div>
  <div class="btn-container">
    <button>button</button>
  </div>
</div>

【讨论】：