How-to: CSS Table Swipe Interaction

#css #html #javascript #ux

Table rows or list items often have actions associated to them, such as deleting, sharing and editing. When designing for touch devices, designers can take advantage of swipe gestures to allow users to quickly perform common actions without having to navigate to a different page or open drawers or modal dialogs.

Gesture based interactions are supported by native mobile languages, but can be tricky to implement in HTML/CSS/JS and are often over-done with excessive use of JavaScript, which can cause low performance and chunky interactions.

In this post, I will walk through 3 simple steps to build a swipe gesture interaction using solely HTML, CSS and a little bit of JS.

Note: the demos in this post should be used on touch devices.

Basic requirements

Let’s start by defining what we want to build. Our swipe snippet should allow the user to:

Use touch to swipe a table row either right or left.
Unveil an action (icon and coloured background) when the user swipes.
Automatically restore scroll position when the user releases the finger.
Trigger an action when the user releases the finger (in case they have swiped far enough).

1. Setting the swipe-able element

As a first step, let’s create our swipe-able element and add basic styles to it. To style it, it is given a class named .swipe-element.

To set the stage for the swipe interaction, we can wrap the element around a div with the class name of .swipe-container.

To reduce the visual clutter, the .swipe-container should have the scrollbar hidden.
To automatically restore scroll position, the .swipe-container should have scroll-snap-type: x mandatory.
To indicate which element should be in focus when automatically restoring the scroll position, the swipe-element should have scroll-snap-align: start.

2. Adding the left and right actions

With the container and scrolling logic in place, the next step is to add the actions.

The icons used in this example are from the Material Icons font.

As a wrapper for the icon, the .action div, as well as the previously added .swipe-element should have min-width: 100%.
The i icon should have position: sticky to ensure it is always visible as soon as the user starts swiping.
the .right action should have justify-content: flex-end to make the icon stick to the right side.

3. Triggering the action

When the user releases the finger, our element should check how far the user has swiped and trigger an action in case they have done it far enough.

There should be a distinction between left and right swipe, so the application can handle them independently.

To start, an ontouchend event listener should be added to the .swipe-container.
In a function called handleSwipe(), we should first define the minDistance the user should swipe for the action to be triggered.
After that, we should calculate the swipeDistance by simply subtracting the container’s clientWidth from its scrollLeft.
Negative values represent a left swipe, while positive ones indicate a right one. In case the swipeDistance is smaller than minDistance * -1, we should trigger the left action, and if it is greater than minDistance, the right action should be triggered instead.
In case the user hasn’t swiped either left or right further than the minDistance, nothing should be triggered.

Conclusion

Using standard CSS selectors, we have built a swipe-able element that can be used for enhancing the user experience of lists and tables on mobile devices.

With some tweaks and a little bit of imagination, this snippet can be modified or extended to show only one action or indicating visually whether the user has swiped far enough, for example.

This component is also available as a plug-and-play in the Kor UI library.