由于 Position:Fixed 内容，父级 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、"Position:Fixed,"是……

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

请注意，项目需要点击事件。

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

"Trigger" 函数甚至无法为您提供事件。

给我一个想法。

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>

由于 Position:Fixed 内容，父级 DIv 无法滚动

Parent DIv can't scroll because of Position:Fixed content

html

javascript

css

scroll

fixed