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.
Having an issue with a web app built using ReactJs and NextJs. I implemented the react-select component in a functional component, but now I'm getting this warning in the console: Warning: Prop id did not match. Server: "react-select-7 ...
Hello there, I am currently learning front-end technologies and have a question. I would like to retrieve the value of a TextBox and display it in a Tool-tip. The code for the TextBox has a maximum length of 30 characters, but the area of the TextBox is no ...
Trying to create a footer with two linked images, I used justify-content: center, but it seems to be centering the images from the start rather than their actual centers. This causes them to appear slightly off to the left. Additionally, the images are sta ...
Is it considered a best practice to convert an observable object to a promise, given that observables can be used in most scenarios instead of promises? I recently started learning Angular and came across the following code snippet in a new project using ...
I am facing an issue where I have multiple objects with the same properties and want to merge them based on a common key-value pair at the first level. Although I know about using the spread operator like this: const obj3 = {...obj1, ...obj2} The problem ...
Recently, I've been working on a project that involves using the Sheet Best API to submit data directly to Google Sheets. However, I'm running into an issue where the data is only being sent to the first sheet out of three. Despite having all the ...
I'm attempting to recreate a visual effect that is similar to: Specifically, I am trying to achieve a style where the links in the navigation bar change color when the corresponding section is displayed, such as having the gallery link in the navbar ...
I'm working on a function that looks like this: const func = (arg1: string, { objArg = true }:{ objArg: string }) => { // some code } Is it possible to make the second parameter (an object) optional? ...
I am currently developing a Chrome extension to modify certain text fields, but I have run into an issue. Specifically, I need to hide the "Stato" field so I implemented the following CSS code: https://i.stack.imgur.com/9blvz.png https://i.stack.imgur. ...
Take a look at this Plunker demo link I have encountered an issue after implementing the orderby feature (line 24) in my application. When I try to add an item without priority and then add another one with priority, followed by deleting the first item, t ...
I have been working on testing this code snippet in Firefox 49.0 on Linux Mint: a{ font-size:50px; color:gray; font-weight:1000; transition:color 1s; } a:hover{ color:black; } a:visited{ color:lightgray; } <a href="">VISITED LINK</a>&l ...
I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...
I am currently developing an Angular site where I need to send a significant amount of data (approximately 1 MB) in an API call. In the Chrome and Firefox browsers, everything works smoothly and quickly, with a response time under one second. However, whe ...
Can you provide guidance on how to toggle the activation of an anchor element using jQuery? ...
I am utilizing the simple php dom parser in my project. Within my loaded dom, there is a link that appears like this in html: <a href="...">Some const tesxt</a> I am wondering how I can utilize the find function to select this particular obje ...
Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...
I've developed an API endpoint to manage user account creation within my Next.js application, utilizing knex.js for handling queries. Despite this, I keep encountering the following error: API resolved without sending a response for /api/users/create ...
Hi everyone, I've encountered a small issue. Just to provide some background, I have a table with checkboxes. Each row in the table has an associated ID, and when selected, I receive an array like this: const mySelectedRoles = [1997, 1998, 1999] Once ...
I am currently working on creating a base modal component that can be re-used, utilizing slots to insert the modal content. The issue I am facing is that when the modal is triggered by clicking a button, it displays without any content present. How can I e ...
My webpage is dynamically generating images from a JSON file through a JavaScript file. However, the images are displaying at different heights, and I want each column to adjust to the height of the image to eliminate any gaps. Particularly, data with the ...