父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事件。

因此不允许使用“指针事件：无”属性。

“ Trigger”功能甚至无法为您提供事件。

给我一个主意。

https://jsfiddle.net/b3w2hpn1/2/

Answer 1

仅将pointer-events: none应用于class=disable格。 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>