是否可以放置一个元素，该元素占据了整个视口，而不会阻止画布与指针互动的能力？

发布于 2025-02-10 18:59:56 字数 1693 浏览 2 评论 0原文

我想覆盖pection元素，该元素占用canvas元素之上的整个视口。 canvas元素正在显示通过JavaScript与鼠标位置交互的WebGL。不幸的是，节元素正在阻止JavaScript识别鼠标位置，因为它与画布没有接触。

尝试了以下解决方案：我添加了pointer-events：none; to e节和h1 elements，但是没有帮助。

重要的是，节元素占用整个视口，因为我打算添加CSS动画和其中的图形，以后必须使用Flexbox将其集中。

我想做的甚至可能做的事情，如果是这样，我该如何实现？

window['webgl-fluid'].default(document.querySelector('canvas'))

* {
  margin: 0;
  padding: 0;
}

html {
  color: gray;
  font-size: 2rem;
}

section {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
}

h1 {
  color: #fff;
  pointer-events: none;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<html>

<body>
  <section>
    <h1>WebGL Fluid Simulation</h1>
  </section>
  <canvas></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
  <script src='https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js'></script>
  <script src="js/script.js"></script>
</body>

</html>

原文

I want to overlay a section element that takes up the entire viewport on top of a canvas element. The canvas element is displaying webgl that interacts with the mouse location through javascript. Unfortunately, the section element is blocking the javascript from recognizing the mouse location because it doesn't come in contact with the canvas.

Attempted the following solutions: I added pointer-events: none; to the section and h1 elements, but it didn't help.

It is important that the section element take up the entire viewport because I intend to add css animations and a graphic inside of it later that must be centered using flexbox.

Is what I'm trying to do even possible and if so, how can I achieve this?

window['webgl-fluid'].default(document.querySelector('canvas'))

* {
  margin: 0;
  padding: 0;
}

html {
  color: gray;
  font-size: 2rem;
}

section {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
}

h1 {
  color: #fff;
  pointer-events: none;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<html>

<body>
  <section>
    <h1>WebGL Fluid Simulation</h1>
  </section>
  <canvas></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
  <script src='https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js'></script>
  <script src="js/script.js"></script>
</body>

</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏辞 2025-02-17 18:59:56

如果在本节上设置了绝对位置，则不会捕获鼠标事件。

window['webgl-fluid'].default(document.querySelector('canvas'))

* {
  margin: 0;
  padding: 0;
}

html {
  color: gray;
  font-size: 2rem;
}

section {
  position: absolute;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
}

h1 {
  color: #fff;
  pointer-events: none;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<html>

<body>
  <section>
    <h1>WebGL Fluid Simulation</h1>
  </section>
  <canvas></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
  <script src='https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js'></script>
  <script src="js/script.js"></script>
</body>

</html>

If you set position absolute on the section the mouse events are not captured.

window['webgl-fluid'].default(document.querySelector('canvas'))

* {
  margin: 0;
  padding: 0;
}

html {
  color: gray;
  font-size: 2rem;
}

section {
  position: absolute;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100vw;
}

h1 {
  color: #fff;
  pointer-events: none;
}

canvas {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  position: absolute;
  inset: 0;
  z-index: -1;
}

<html>

<body>
  <section>
    <h1>WebGL Fluid Simulation</h1>
  </section>
  <canvas></canvas>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js'></script>
  <script src='https://unpkg.com/[email protected]/dist/webgl-fluid.umd.min.js'></script>
  <script src="js/script.js"></script>
</body>

</html>

回复收藏 0 原文

~没有更多了~