无法在另一个溢出 div 内滚动 div

Question

行为

我无法在另一个溢出 div 内的 div 中滚动。奇怪的是，它只发生在移动分辨率中。

我有这个 HTML 结构：

这些是应用于 div 的 css 规则：

  .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

Answer 1

我不完全确定这是否是您要找的东西，但在这里：

首先，我认为您需要从 .event-chat-messages 中取出 .event-chat-swipe-handler 并将其放在它下面。如果高度被赋予适当的值，那么滚动应该可以正常工作。为了让 vh 在这种情况下工作，您需要将 div 包围在一个主体中并将其设置为特定高度、百分比、px 等。第二个 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>

无法在另一个溢出 div 内滚动 div

Can't scroll on div inside of a another overflow div

html

css

frontend

overflow

行为