Невозможно прокрутить div внутри другого переполненного div - PullRequest
Новая
       4

Невозможно прокрутить div внутри другого переполненного div

0 голосов
/ 19 июня 2020

Поведение

Я не могу прокручивать div внутри другого переполненного div. Странно то, что это происходит только в мобильных разрешениях.

У меня есть структура HTML:

enter image description here

И это правила css, применяемые к div: 

  .event-chat-messages {
    margin-bottom: $event-chat-input-height;
    overflow: auto;
    height: calc(100vh - #{$event-chat-height-difference});
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;

    .event-chat-swipe-handler {
      height: 100%;
      overflow: scroll;
    }
  }

См. Следующее видео, демонстрирующее проблему: https://drive.google.com/file/d/1axB6ZgxyEyB9w6A_SpSqZzFsQ-yP1dm3/view?usp=sharing

1 Ответ

0 голосов
/ 19 июня 2020

Я не совсем уверен, что вы ищете, но здесь:

Сначала я считаю, что вам нужно получить .event-chat-swipe-handler из .event-chat-messages и поместить его под ним. Тогда прокрутка должна работать нормально, если высотам заданы правильные значения. Чтобы vh работал в этой ситуации, вам нужно окружить эти div телом и установить для него определенную высоту, процентную метку, пиксель и т. Д. Второй div .event-chat-swipe-handler не будет прокручиваться, если высота его родительского элемента составляет 100%, поэтому, возможно, измените его на что-то более 100%: https://jsfiddle.net/nukeboy212/Lr9dyafg/14/

  .event-chat-messages {
    margin-bottom: $event-chat-input-height;
    overflow: scroll;
    height: 30vh;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;


  }
      .event-chat-swipe-handler {
      height: 120%;
      overflow: scroll;
    }
<body style = "height: 100%">
<div class="event-chat-messages">
<div class ="event-chat-swipe-handler">

<br>
<br>
<br>
<br>
<br>
<br>
test
<br>
test
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...