由于位置：固定内容，父 DIv 无法滚动

Question

我使用 IScroll 制作了一个移动网页。

网页的组成如下。

HTML

<div class="wrap">
 <div class="content">

  <div class="a">
    TOP
  </div>
  <div class="item">
    <div class="disable">
      Google Ads
    </div>
  </div>
  <div class="b">
    BOTTOM
  </div>
 </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

CSS

html, body, .wrap {
  margin: 0px;
  height: 100%;
}

.content {
  height: 100%;
  overflow-y: scroll;
}
.wrap {
  width:100%;
  height:100%;
  background-color:white;
}


.disable {
  position: fixed;
  width:100%;
  height:100%;
  background-color:aqua;
  z-index:1;
}
.a, .b {
  width: 100%;
  height:100px;
  position:relative;

  z-index:2;
}

.a {
  background-color: red;
}

.item {
  width:100%;
  height:100%;
}
.b {
  background-color: blue;
}

如果你运行上面的代码，

您可以通过将光标移至 A 和 B 来滚动。

在移动设备上，您可以使用触摸滚动。

但是，如果您将光标移到具有 Aqua 背景颜色的 DIV 上并滚动，

我无法滚动。

DIV“位置：固定”是...

由于高度是 100%，我认为没有滚动事件。

供您参考，Item 需要一个 Click 事件。

所以“Pointer-Events: None”属性是不允许的。

“触发器”功能甚至不能给你一个事件。

给我一​​个想法。

https://jsfiddle.net/kasthe/b3w2hpn1/3/

Answer 1

仅将pointer-events: none 应用于class=disable div。 div class=item 仍然可以点击。

$(".wrap").css("height", $(document).height() + "px");
console.log($(".wrap").height())

html, body, .wrap {
  margin: 0px;
  height: 100%;
}

.content {
  height: 100%;
  overflow-y: scroll;
}
.wrap {
  width:100%;
  height:100%;
  background-color:white;
}


.disable {
  position: fixed;
  width:100%;
  height:100%;
  background-color:aqua;
  z-index:1;
}
.a, .b {
  width: 100%;
  height:100px;
  position:relative;
  
  z-index:2;
}

.a {
  background-color: red;
}

.item {
  width:100%;
  height:100%;
}
.b {
  background-color: blue;
}

<div class="wrap">
 <div class="content">
 
  <div class="a">
    TOP
  </div>
  <div class="item" onclick="alert('item clicked')">
    <div class="disable" style="pointer-events:none">
      Google Ads
    </div>
  </div>
  <div class="b">
    BOTTOM
  </div>
 </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>