在溢出-y 上禁用滚动：scroll div - Scroll Page

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>

代码笔示例：

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

我有点希望 div 的行为就像谷歌地图 iframe 如果滚动到它上面一样。

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

谷歌地图示例：

 <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默认overflow-y: hidden并在所需的修饰键按下时切换它以scroll来解决这个问题。 我在这个例子中使用了 shift 键来避免使用控制 + 滚动的跨平台本机行为。

注意：要使示例工作，您需要在按住 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>