Should a click handler be run when clicking on a scrollbar

Question

Take a look at these HTML fragments: Jsfiddle

<style>
  div { 
    margin:20px; 
    border: 30px red solid; 
    padding: 20px; 
    background-color:green;
    overflow-y:scroll; 
  }
</style>

<div onclick="alert('div clicked');">click me</div>

Now, if the user clicks on the scrollbar in Firefox or Chrome, the click handler on the div element won't fire. On the other hand, in IE the click handler does fire.

Which behaviour is correct? Is the expected behaviour defined anywhere?

Answer 1

w3 recommendations suggest that the scrollbar should be placed between the inner border edge and the outer border padding edge of an element. Also the scrollbar's dimensions should be subtracted from your element's dimensions.

Long story short, the scrollbar should not be inside the element. and the element's height/width should be adjusted appropriately.