Проведите пальцем по экрану, чтобы отобразить действия на мобильном устройстве с помощью HTML. ⇐ Html

[Anonymous]

Я работаю над HTML-кодом, который будет отображаться на мобильных устройствах, и мне хотелось бы реализовать список с помощью смахивания влево/вправо для отображения любых действий.
Я не могу использовать какую-либо библиотеку, поэтому мне нужно сделать это только с помощью HTML и JS, я провел некоторые исследования и некоторые тесты, и мне не удалось заставить его работать, пролистывание работает и отображает действие, стоящее за ним, но правильное действие не остается открытым.
Это мой код:
https://jsfiddle.net/vrf7mg3e/1/

Код: Выделить всё

function onTouched(event) {
const minDistance = 80;
const container = document.querySelector('.swipe-container');

const elementWidth = container.clientWidth;
const swipeDistance = container.scrollLeft - elementWidth;

if (swipeDistance < minDistance * -1) {
console.log('swiped left');
container.scrollLeft = elementWidth * 2;
} else if (swipeDistance > minDistance) {
console.log('swiped right');
container.scrollLeft = 0;
} else {
console.log('did not swipe');
}
}

Код: Выделить всё

.swipe-container {
display: flex;
overflow: auto;
overflow-x: scroll;
scroll-snap-type: x mandatory;
width: 500px;
}

.swipe-container::-webkit-scrollbar {
display: none;
}

.swipe-element {
scroll-snap-align: start;
font-family: sans-serif;
padding: 16px;
background-color: whitesmoke;
}

.action,
.swipe-element {
min-width: 100%;
}

.action {
display: flex;
align-items: center;
}

i {
color: white;
position: sticky;
left: 16px;
right: 16px;
}

.left {
background-color: red;
}

.right {
justify-content: flex-end;
background-color: cornflowerblue;
}

Код: Выделить всё

[i]delete[/i]

Swipe me to the left or right

[i]edit[/i]

Подробнее здесь: https://stackoverflow.com/questions/798 ... -with-html