Is it possible for JavaScript to capture scroll events while allowing clicks to pass through?

Question

Is it possible for JavaScript to capture scroll events while allowing clicks to pass through?

Currently, I have a setup where the user needs to interact with the layer behind the transparent scroll capture:

http://jsbin.com/huxasup/4/edit?html,css,js,console,output

scrollerCapture = document.querySelector('.scroller-capture');
scrollerCapture.addEventListener('scroll', e => {
    e.preventDefault();
    console.log(scrollerCapture.scrollTop);
});

Is there a conventional method to achieve this functionality? Are tools like iScroll or ScrollMagic recommended for implementing this on mobile devices?

Appreciate any insights.

javascript html css scroll

Answer 1

Answer №1

To create a <div> tag with the onscroll event, you can simply add the following code:

<div id="myDiv" onscroll="doSomething();">

Next, in your HTML file, include a script section like this:

<script>
function doSomething() {
        //Code to execute when scrolling occurs
    };
</script>

I hope this explanation is useful for you. Thank you!

Answer 2

To create a <div> tag with the onscroll event, you can simply add the following code:

<div id="myDiv" onscroll="doSomething();">

Next, in your HTML file, include a script section like this:

<script>
function doSomething() {
        //Code to execute when scrolling occurs
    };
</script>

I hope this explanation is useful for you. Thank you!

Answer 3

Answer №2

If you want to locate a specific element in the DOM based on mouse coordinates, you can use

elementFromPoint()

This method helps in identifying the topmost element at the given coordinates.

The elementFromPoint() is a useful method of the Document interface that returns the element positioned at the specified coordinates. Find out more here

Once you have found the desired DOM element, you can trigger a click action on it.

element.click();

Read about HTMLElement click event here

Here's a quick example demonstrating how this can be implemented:

document.addEventListener('click', e => {
  var targetElement = document.elementFromPoint(e.pageX, e.pageY);
  targetElement.click();
})

You may also find the CSS property called:

pointer-events: none;

Useful as it allows mouse events to pass through certain elements.

The CSS property pointer-events provides control over which graphic element can receive mouse events under certain conditions. The value 'none' not only indicates that the element cannot be targeted by mouse events, but it also lets the events pass through and interact with elements beneath it instead. Learn more about pointer-events here

Answer 4

If you want to locate a specific element in the DOM based on mouse coordinates, you can use

elementFromPoint()

This method helps in identifying the topmost element at the given coordinates.

The elementFromPoint() is a useful method of the Document interface that returns the element positioned at the specified coordinates. Find out more here

Once you have found the desired DOM element, you can trigger a click action on it.

element.click();

Read about HTMLElement click event here

Here's a quick example demonstrating how this can be implemented:

document.addEventListener('click', e => {
  var targetElement = document.elementFromPoint(e.pageX, e.pageY);
  targetElement.click();
})

You may also find the CSS property called:

pointer-events: none;

Useful as it allows mouse events to pass through certain elements.

The CSS property pointer-events provides control over which graphic element can receive mouse events under certain conditions. The value 'none' not only indicates that the element cannot be targeted by mouse events, but it also lets the events pass through and interact with elements beneath it instead. Learn more about pointer-events here

Is it possible for JavaScript to capture scroll events while allowing clicks to pass through?

Answer №1

Answer №2

Similar questions

Section of links spanning 4 columns in full-width

Utilizing a dropdown list in HTML to dynamically change images

Transferring intricate data gracefully through the URL

"Form submission fails to populate _POST when file and text fields are used simultaneously

"Implementing a responsive design with a background image and radial gradient - how to

One or multiple web browsers set in the Browserslist of the project

Is it possible to achieve a capsule shape using border-radius without specifying a fixed width or height?

How can you implement WriteFile in a GET Request without causing the response to be blocked

Navigating to new location following the final iteration in a loop of asynchronous updates in MongoDB

Encountering difficulties in generating a binary from a nodejs application with pkg

Keep the HTML structure of an element in the DOM while excluding it from an ng-repeat loop

Utilizing dynamic routes and incorporating additional search parameters within the URL structure in NextJS has never

How can we toggle a function to expand or collapse fields generated in an ngFor loop?

What is the best way to attach labels to objects in three.js when clicking the mouse?

The AngularJS $filter(date) function is causing incorrect format outputs

Sorting arrays in javascript

Determine the possible width of a concealed element

"Encountering an error stating "breakpoint set but not yet bound" while debugging a node.js application

Preventing clashes in namespaces while incorporating Bootstrap into a plugin for WordPress

Performing real-time arithmetic calculations on dynamic text input fields using AngularJS