У меня есть контейнер 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>
1
Yichaoz 15 Апр 2020 в 02:04

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>
0
Temani Afif 14 Апр 2020 в 23:07