Recently, I've been developing a left swipe gesture handler for chat bubbles. Implementing touchMove and touchStart seems like the logical next step, but for now, I'm focusing on making it work seamlessly for PC/web users.
I managed to make it functional, but I believe there must be a more efficient way than constantly updating the inline transform style for each bubble. The current implementation doesn't feel as smooth as I envisioned.
I even experimented with a somewhat "hacky" approach using scroll-snap, but couldn't quite get it to function properly.
While my preference is a pure CSS solution, I'm open to other suggestions. Is the method outlined below the only viable option?
const { createRoot } = ReactDOM;
const { StrictMode, useEffect, useState } = React;
// Rest of the JavaScript code...
* {
outline: none;
box-sizing: border-box;
margin: 0;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
}
// Rest of the CSS code...
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>Here's how it currently appears: