Using CSS or JavaScript to trigger events while scrolling with touch

Question

Using CSS or JavaScript to trigger events while scrolling with touch

Imagine a scenario where multiple boxes are stacked on top of each other:

<div style="width: 100%; height: 100px; background-color: red">
stuff
</div>

By clicking or touching them, the background color can be easily changed using CSS (:hover, :focus) or with Javascript/jQuery.

For better user experience, it is important to indicate to users that they can interact by just touching the screen. When a user touches a box while intending to scroll down, the box should subtly change its background color.

In current implementations, jQuery events for click or touch only trigger if the action is a direct click and not incidental touching during scrolling.

What is the best way to detect a touch on the screen that is not a direct click? The objective here is simply to change the background color, whether achieved through CSS or javascript.

javascript jquery html css events

Answer 1

Answer №1

If you're looking to utilize the "tap" event, consider using this library: https://github.com/jonpacker/jquery.tap

<script src="https://rawgit.com/jonpacker/jquery.tap/master/jquery.tap.min.js"></script>
<script>
  $(".tappable").tap(function() {
    console.log("Tappable was tapped!");
  });
</script>

Alternatively, you can explore the Jquery Mobile library as well:

Answer 2

If you're looking to utilize the "tap" event, consider using this library: https://github.com/jonpacker/jquery.tap

<script src="https://rawgit.com/jonpacker/jquery.tap/master/jquery.tap.min.js"></script>
<script>
  $(".tappable").tap(function() {
    console.log("Tappable was tapped!");
  });
</script>

Alternatively, you can explore the Jquery Mobile library as well:

Answer 3

Answer №2

Although my question is different from this particular one, I found the top answer to be extremely helpful in resolving my issue.

$('.container').on({
'touchstart mousedown': function (e) {
  $(this).css('opacity', 0.9);
},
'touchend mouseup': function (e) {
    $(this).css('opacity', 1);
}
});

Answer 4

Although my question is different from this particular one, I found the top answer to be extremely helpful in resolving my issue.

$('.container').on({
'touchstart mousedown': function (e) {
  $(this).css('opacity', 0.9);
},
'touchend mouseup': function (e) {
    $(this).css('opacity', 1);
}
});

Using CSS or JavaScript to trigger events while scrolling with touch

Answer №1

Answer №2

Similar questions

Adding design to distinct element after clicking a button

Having trouble with the "Corrupted @import" error during grunt build?

Adjusting the size of the snap increments

Javascript editing enhancement for real-time changes

Designing a rounded border radius for various child elements within a layout

How can we activate navigation on a mobile browser?

React State Property that looks at properties within its own scope

Button for Toggling Audio Play and Pause

What is the best way to add a character within a YouTube JSON link?

Modifying the ptTimeSelect functionality in conjunction with the validationEngine plugin

Experiencing varying top offsets on initial click followed by consistent offsets on subsequent clicks

What is the reason that (click) does not send my data within <button>, while (change) within <input> does in Angular and HTML?

jQuery slider triggering a function with a consistent delay of 1 until the handle is released

Combine and interchange horizontal and vertical form designs within antd 5 for a personalized touch

I am encountering an issue where the msal-browser login process seems to be frozen at the callback

Animating multiple elements in Angular 2 using a single function

The art of arranging elements on a webpage using HTML and

Issue with NullInjectorError: Failure to provide a custom component - Attempting to add to providers without success

Implement a transition effect for when elements change size using the `.resizable().css` method

concerning a snippet of programming code