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?

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?

• javascript
• html
• css
• onclick

• 8 IE puts the scrollbars inside, keeping the overall width/height as declared. – 4dgaurav Commented Aug 17, 2014 at 12:42
• Which behavior do you need to enforce? – Yuriy Galanter Commented Aug 20, 2014 at 17:07
• @YuriyGalanter - neither really. Think of it as wishing to raise a bug with one or more of the browsers' bug trackers and I want to know which one(s). – Alohci Commented Aug 20, 2014 at 17:11

5 Answers 5

w3 remendations 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.

I think both behaviour are ok. When scrollbar is over document (ie, safari), it should trigger a click event while the scrollbar is not it shouldn't. (chrome, firefox).

I 'remend' don't messing (trying to handle this behavior) with the click on scroll bar but the scroll event or the click if it's on document or not.

I'm pretty sure with mobile browsers this would be a large story if you try to 'guess' what will happen.

If thought about literally, a scroll bar is not actually part of the page, rather a way to navigate that page, so should not have any direct interference with the page its self, unless someone uses an onscroll effect. If the scroll bar covers part of an element, then ether the page is to wide, or the browser does not pensate for the added width of the scroll bar. I think in this case, Firefox and Chrome are "right" but IE is not necessarily wrong, they just have a different way of implementing scrolling.

I guess another question is "does the browser display part of the element behind the scroll bar, if the page width is 100%?" If so then the elements should be clickable through the bar.

Hope this makes sense :)

According to W3, click events are bubbling events.

What does this mean? Here it is explained:

Bubbling The process by which an event propagates upward through its ancestors after being handled by the event's target.

Now, the problem here, regarding scrollbars, is to understand if they should:

1. stop a click event propagation, or
2. let it bubble up to a more proper handler (in this case being the div element), or
3. respond to the event AND also bubble it up in order for ancestors to catch it.

Now, in the same W3 page is explained what a scroll event is:

scroll The scroll event occurs when a document view is scrolled.

Now what you would expect from a scrollbar would be to handle the scroll of a document view (in this case a div) without interfering with it's correct and expected behavior (including events propagation).

The real problem here was that, when the scroll whell on mouses was still imagination, in order to scroll you had to click first! So, in this capacity, we can say that behaviors number 1 and number 3 are both correct (the first giving priority to the scrollbar, while the second considering both the scrollbar and the ancestors).

All this to say: at the moment there is no explicit standard on this. Browser creators can decide to adopt one behavior or the other and they are both correct.

What you can do in this case, in order to get a homogeneous behavior across browsers, could be, for instance, to catch the clicks on the scrollbars (for Firefox and Chrome) and trigger the div's click event.

There is a bigger issue here that propagates throughout webapp development: There isn't actually a standard; just remendations. W3C is the loudest voice when it es to unifying the web but all they can produce is remendations as Microsoft and smaller web browser developers are not a part of the mittee.

So the short answer is: neither are right nor wrong due to there not being an accepted standard

The long answer is this long ago Microsoft made a decision that contradicted Netscape(the only other browser at that time) that goes against what other browsers are now doing that pertain to your question:

Microsoft decided that everything pertaining to an element will be included/drawn within the element's bounding box(including borders, padding, margins(?), scrollbars, etc). What this means is ANYTHING clicked within the element will raise an onclick event regardless of what was clicked because its within the bounding box.

Where as W3C remends only the padding and display area be included leaving borders, margins, scrollbars, etc to be rendered outside of it, which in turn means the only time onclick is raised is when the padding and/or display area of an element is clicked