Check out these HTML snippets: 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>
If a user clicks on the scrollbar in Firefox or Chrome, the click handler on the div element will not activate. However, in IE, the click handler does work.
Which behavior is considered correct? Is there a defined expected behavior for this scenario?
According to W3C guidelines, it is recommended to position the scrollbar between the inner border edge and the outer border padding edge of an element. It is also important to adjust the dimensions of your element by subtracting the scrollbar's dimensions.
In simpler terms, the scrollbar should never be contained within the element itself, and the height/width of the element should be modified accordingly.
In my opinion, both behaviors are acceptable. In browsers like Safari, clicking should be triggered when the scrollbar is over the document, while in browsers like Chrome and Firefox, it should not.
I suggest avoiding tampering with the click on the scrollbar itself, but rather focus on handling the scroll event or determining if the click is on the document or elsewhere.
It could get complicated when dealing with mobile browsers and trying to predict their behavior in these scenarios.
When considering a scroll bar from a literal standpoint, it is not an integral part of the page itself but rather a tool for navigating that page. As such, it should not directly interfere with the content on the page unless an onscroll effect is applied. If a scroll bar ends up covering a portion of an element, it could be due to the page being too wide or the browser not adjusting for the additional width of the scroll bar. It seems like Firefox and Chrome handle this situation correctly, while IE may have a different approach to scrolling.
Another aspect to ponder is whether the browser displays any portion of the element behind the scroll bar when the page width is set to 100%. If this is the case, then the elements should still be clickable through the scroll bar.
I hope this explanation clarifies things :)
As stated on the W3 website, click events are considered to be bubbling events.
Essentially, what does this mean? A clear explanation can be found here:
Bubbling: This refers to the process in which an event moves upwards through its ancestors after being processed at the target of the event.
The issue arises when dealing with scrollbars, as we need to determine whether they should:
Further elaborating on the matter, the same W3 resource explains the nature of a scroll event:
Scroll: This event is triggered when a document view is scrolled.
A scrollbar is typically expected to manage the scrolling of a document view (like a div) without disrupting its intended behavior, including event propagation.
The initial hurdle arose back when mouse scroll wheels were merely a concept, and clicking was necessary to initiate scrolling! Consequently, both behaviors 1 and 3 hold merit in this scenario (one prioritizing the scrollbar, while the other considering both the scrollbar and ancestors).
In essence, there isn't a defined standard for this particular situation yet. Browser developers have the liberty to opt for either approach, both of which are deemed valid.
To ensure consistent behavior across various browsers, one potential solution could involve capturing scrollbar clicks (applicable to Firefox and Chrome) and triggering the div's click event accordingly.
The issue at hand extends beyond just this specific scenario in webapp development: there is no concrete standard, only suggestions. W3C leads the charge in trying to unify the web, but their efforts result in recommendations since Microsoft and other smaller browser developers are not involved in the decision-making process.
In summary, neither side is definitively right or wrong due to the lack of a universally accepted standard.
To delve deeper into the history of this debate, it must be noted that many years ago Microsoft made a choice that clashed with Netscape (the primary competitor at the time) which conflicts with what current browsers are implementing regarding this topic:
Microsoft's stance was that everything related to an element should be contained within its bounding box (including borders, padding, margins(?), scrollbars, etc). This means that any click within the element triggers an onclick event regardless of the exact area clicked, as long as it falls within the bounding box.
On the other hand, W3C suggests that only the padding and visible content area should be included within the bounding box, while leaving borders, margains, scrollbars, etc. outside of it. The implication is that an onclick event is only triggered when the padding and/or visible content area of an element is clicked.
Struggling to make a webpage with a Google Map, Chart, and Grid expand to fill the available space on the screen. Tried various CSS tricks but nothing seems to work. Check out this simplified example in JsFiddle that showcases the issue: http://jsfiddle. ...
I've hit a wall and I'm starting to lose my mind. I've tried all the different methods like FormsModules, ReactiveForms, FORMDIRECTIVES, Input, Output, but I just can't seem to figure out how to make ngModel work between components. My ...
As a beginner in creating meteor apps, I am working on a project that involves querying git issues from a specific repository. The goal is to generate tasks from these issues after retrieving them using the Github API. However, I keep encountering an error ...
Our application generates two URLs that users often want to copy and paste into Gmail. To make these links more visually appealing than the lengthy URLs, we implemented HTML code. We included a feature that places the HTML on the Windows clipboard for easy ...
Suppose I have the following pseudocode in my routes.js file: var pkg = require('random-package'); app.post('/aroute', function(req, res) { pkg.impl_func(data, function (err, result) { myFunction(entity).then(user=>{ ...
Currently, I am in the process of building a website using HTML and CSS and have encountered an issue. Within my CSS file, I have defined an ID called "full" which sets a wooden background after the sidebar and is intended to span across the entire page. A ...
I am struggling to access the book.xml file that is located in the same folder as other files. Everything seems fine, but the ajax function refuses to enter the success state and instead shows an [object object] error message. The XML file is very simple, ...
Imagine this scenario: I have a dynamic object called ViewBag, which is essentially a list filled with some results; Scenario 1: User 1 enters and populates the ViewBag.Products object with a list of 50 items; Scenario 2: User 2 enters and fills t ...
Upon logging in successfully on my custom signIn-Page using next-auth, I am facing an issue with redirecting back to the callbackUrl. The setup includes react 18.2.0, next 13.4.8-canary.2, and next-auth 4.22.1. The code for the signIn-Page (\src&bsol ...
After trying out various responsive layouts for desktops, tablets, and mobile phones, I've encountered a challenge with the current design below. Initially, I utilized a grid layout from Bootstrap, but as the width decreases, the second column shifts ...
I love incorporating ruby annotation to include furigana above Japanese characters: <ruby><rb>漢</rb><rt>かん</rt></ruby><ruby><rb>字</rb><rt>じ</rt></ruby> However, when attemp ...
function onLoad() { eworkData.FieldByName('SearchReference').HTMLfield.onkeydown=function(evt) { var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode; if( keyCode == 13 ) { eworkDat ...
I am attempting to control the layout of the grid on my website using CSS. By utilizing Bootstrap 4, I have created two divs with equal height using display:grid. However, I am facing difficulties in managing the child elements within these divs. I am tryi ...
I successfully implemented a dropdown list using Vue.js, but now I want to add another similar list. How can I set this up? Here are the codes for both dropdown lists: var addUserVue = new Vue({ el: "#app", data: { heading: "Vue Select Cas ...
I have a menu loading in an iframe with links using # like http://<location>/page.html#part1. When I click inside the iframe, the entire page outside of the iframe scrolls to the location of #. How can I stop this from happening? I only want the me ...
Currently, I am following the tutorial on next.js available at https://nextjs.org/learn/dashboard-app I have reached chapter 14, which focuses on enhancing accessibility, located at https://nextjs.org/learn/dashboard-app/improving-accessibility During on ...
I am currently working on a HTML menu that includes a button to open it and an unordered list : <nav class="menu"> <button> <h1>Menu</h1> </button> <ul class="mylist" ...
Recently delving into Angular, I encountered an issue: I have both a list view and a details view with tags. To facilitate navigating between the two views and loading new elements from a service upon click events, I created a directive. My aim is to also ...
The outcome of the code below is displayed in this image: https://i.stack.imgur.com/CPDqC.png Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making ...
Encountering some challenges with jQuery while attempting to utilize the same function and iterate over select boxes that are dynamically generated with jQuery's clone() method. Here is a snippet of the content being cloned: <select name="expense ...