我真的看不出有两个直接在对方之上的div的目的。也许您可以尝试将scrollable与hover结合使用。我肯定会避免两个div直接在对方的顶部。也许pseudo-elements也可以帮助你实现你试图用两个堆叠的div来做的事情。
然而，关于你的问题：我认为这是有可能的，但相当黑客，我不会真的推荐它。正如您在示例中所看到的，它通过使用pointer-events来工作，但它既不可访问，也不是一个真正的好解决方案。

.container {
  position: relative;
}
.scrollable {
  border: 1px solid blue;
  height: 100px;
  width: 200px;
  overflow-y: scroll;
  z-index: 1;
  position: absolute;
  pointer-events: all;
}

.hoverable {
  color: red;
  height: 100px;
  width: 200px;
  border: 1px solid red;
  z-index: 2;
  position: absolute;
  pointer-events: all;  
}

.hoverable:hover {
  pointer-events: none;
  background-color: rgba(0,0,0,0.3);
}

<div class="container">
  <div class="scrollable">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget augue elit. Nullam eget augue vel odio feugiat malesuada. Suspendisse ultrices, lacus nec finibus varius, ipsum tortor mattis urna, ut tincidunt nibh ex eu ipsum. Ut et neque vitae urna euismod placerat vel in enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget augue elit. Nullam eget augue vel odio feugiat malesuada. Suspendisse ultrices, lacus nec finibus varius, ipsum tortor mattis urna, ut tincidunt nibh ex eu ipsum. Ut et neque vitae urna euismod placerat vel in enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget augue elit. Nullam eget augue vel odio feugiat malesuada. Suspendisse ultrices, lacus nec finibus varius, ipsum tortor mattis urna, ut tincidunt nibh ex eu ipsum. Ut et neque vitae urna euismod placerat vel in enim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget augue elit. Nullam eget augue vel odio feugiat malesuada. Suspendisse ultrices, lacus nec finibus varius, ipsum tortor mattis urna, ut tincidunt nibh ex eu ipsum. Ut et neque vitae urna euismod placerat vel in enim.</p>
  </div>

  <div class="hoverable">
    <h2>Hover me!</h2>
  </div>
</div>