CODEWITHSUNDEEP
javascriptjquerycss
Alex Nikolsky
Alex Nikolsky

Reputation: 2179

Onclick event refuses to work

I wrote some function to scroll the body of my page but it won't work for some reason. I suspect it has to do with my stylesheets. How to fix that without removing HTML code blocking that click?

My Codepen sandbox.

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

Upvotes: 0

Views: 120

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28564

You were right, it's to do with the stylesheet.

You position the canvas in a fixed manner. This removes it from the flow and adds it to its own seperate "layer" if you will. By default, this layer sits on top of any static layer.

What this actually means: when you think you're clicking the div .scroll, you are actually clicking the canvas because it's sitting on top.

Ways to solve this:

  • Add z-index: -1 to the canvas (though this will hide it behind the content; not recommended)
  • Add pointer-events: none to the canvas (depending on the goal of the canvas, this might not be useful either. Click events will "fall through" the canvas)
  • Position the canvas somewhere else (recommended)
  • Position .scroll relatively (with a higher z-index than the canvas) (recommended)

Without knowing what you're going to use that canvas for, it's hard to say what you should do.

Upvotes: 6

krishnaxv
krishnaxv

Reputation: 956

Just add position: relative; to your <div> in Codepen.

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

Hope it helps!

Upvotes: 1

Related Questions