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.
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.
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).
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
To set the stage for the swipe interaction, we can wrap the element around a div with the class name of
- To reduce the visual clutter, the
.swipe-containershould have the scrollbar hidden.
- To automatically restore scroll position, the
scroll-snap-type: x mandatory.
- To indicate which element should be in focus when automatically restoring the scroll position, the
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
.actiondiv, as well as the previously added
iicon should have
position: stickyto ensure it is always visible as soon as the user starts swiping.
.rightaction should have
justify-content: flex-endto make the icon stick to the right side.
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
ontouchendevent listener should be added to the
- In a function called
handleSwipe(), we should first define the
minDistancethe user should swipe for the action to be triggered.
- After that, we should calculate the
swipeDistanceby simply subtracting the container’s
- Negative values represent a left swipe, while positive ones indicate a right one. In case the
swipeDistanceis 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.
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.