Question

我写了一些函数来滚动页面的主体，但由于某种原因它不能工作。我怀疑它与我的样式表有关。如何解决这个问题而不删除阻止该点击的HTML代码？

＆＃13;

$(document).on('click', '.scroll', function() {
  $("body").animate({
    scrollTop: 500
  }, 'slow');
})

＆＃13;

   canvas {
     width: 100%;
     height: 100vh;
     position: fixed;
   }
   body {
     height: 1000vh;
     margin: 0;
     overflow-y: auto;
   }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
<div class="scroll" style="display: block;">
  CLICK TO SCROLL
</div>

＆＃13;

Answer 1

你是对的，它与样式表有关。

您以固定的方式定位画布。这将它从流程中移除并将其添加到其自己的单独的层中＃34;如果你愿意的话。默认情况下，此图层位于任何静态图层的顶部。

这实际上意味着什么：当您认为自己点击div .scroll时，实际上是在点击画布，因为它位于顶部。

解决这个问题的方法：

将z-index: -1添加到画布（虽然这会将其隐藏在内容后面;不推荐使用）
将pointer-events: none添加到画布（取决于画布的目标，这可能也没用。点击事件将＆＃34;通过＆＃34;画布）
将画布放在其他位置（推荐）
位置.scroll relative ly（z-index比画布更高）（推荐）

在不知道你将要使用该画布的情况下，很难说你应该做什么。

Answer 2

只需将position: relative;添加到Codepen中的<div>。

<canvas id="canvas"></canvas>
<div class="scroll" style="display: block; position: relative;">
  CLICK TO SCROLL
</div>

希望它有所帮助！

Onclick事件拒绝工作

2 个答案: