Как предотвратить фиксированную прокрутку сенсорного блока

Question

У меня есть контейнерный элемент 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>

Answer 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>