Onclick事件拒绝工作

Question

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

我的Codepen沙箱.

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

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

<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>

Answer 1

你是对的,这与样式表有关.

您以固定的方式定位画布.这将它从流中移除并将其添加到其自己的单独"图层"(如果您愿意).默认情况下,此图层位于任何静态图层的顶部.

这实际意味着什么:当你认为你点击div .scroll时,你实际上是在点击画布,因为它位于顶部.

解决这个问题的方法:

• 添加z-index: -1到画布(虽然这将隐藏在内容后面;不推荐)
• 添加pointer-events: none到画布(取决于画布的目标,这可能也没用.单击事件将"落到"画布)
• 将画布放在其他位置(推荐)
• 位置.scroll relatively(z-index比画布更高)(推荐)

如果不知道你将要使用哪种画布,很难说你应该做什么.