javascript - 溢出时禁用滚动-y : scroll div - Scroll Page instead

Question

在溢出-y 上禁用滚动:滚动 div

当使用鼠标滚轮时，我希望页面滚动，而不是具有溢出-y:滚动行为的 div。

使用滚动条仍然可以进行滚动。

我不想要的示例:

.container{
  width: 420px;
  height: 400px;
  border: 10px solid blue;
  overflow-y: scroll;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.content{
  width: 400px;
  height: 800px;
  background: linear-gradient(red, yellow);
}

.space {
  background: green;
  height: 400px;
  width: 400px;
  border: 10px solid blue;
  margin: 0 auto;
}

<div class="space"></div>
<div class="container">
  <div class="content"></div>
</div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>

CodePen 示例:

https://codepen.io/dmoetech/pen/jOEQWqX

我有点希望 div 的行为就像谷歌地图 iframe 在滚动到其上方时的行为一样。

了解 Google map 如何要求按 CTRL 键来放大或缩小，而不仅仅是缩放。

Google map 示例:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d50470.02846886951!2d-122.4726192650972!3d37.75776267810189!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan%20Francisco%2C%20Kalifornien%2C%20USA!5e0!3m2!1sde!2sde!4v1579466641575!5m2!1sde!2sde" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Answer 1

我会通过默认设置overflow-y:hidden来解决这个问题，并在按下所需的修饰键时将其切换为scroll。我在本示例中使用了 Shift 键，以避免使用 Control + 滚动的跨平台 native 行为。

注意:要使示例正常工作，您需要在按住 Shift 之前单击进入结果 iframe。

const container = document.querySelector(".container")
const keyCode = 16 // shift

document.addEventListener("keydown", e => {
  if (e.keyCode === keyCode) {
    container.style.overflowY = "scroll"
    console.log("Scrolling Enabled")
  }
})

document.addEventListener("keyup", e => {
  if (e.keyCode === keyCode) {
    container.style.overflowY = "hidden"
    console.log("Scrolling Disabled")
  }
})

.container {
  max-height: 100px;
  border: 1px solid red;
  font-size: 18px;
  overflow-y: hidden;
}

<div class="container">
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
  Content<br />
</div>

<p>Hold <code>shift</code> to scroll in the box above.</p>