禁用Scroll on overflow-y: scroll div - Scroll Page

Question

禁用Scroll on overflow-y: scroll div

当使用鼠标滚轮时，我希望滚动页面，而不是带有overflow-y: scroll行为的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 Maps如何要求按下CTRL键来放大或缩小，而不仅仅是缩放。

Google Maps示例：

​

<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 +滚动的跨平台本机行为。

注意:为了让示例正常工作，您需要在按住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>

​