javascriptmobileswipe

Swipe left/right using buttons

I have this UI on mobile:

area that can be swiped horizontally

The user can swipe the list of characters horizontally. Swiping is achieved using this CSS on the container that holds the badges of characters:

@media (hover: none) {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  &:-webkit-scrollbar {
    display:none;
  }
}

Using JavaScript, I am adding the < and > buttons. How can I achieve that the swipeable area moves a little bit to the left when the user touches the "< button" and a little bit to the right when the user touches the "> button"?

Solution

  • you can achieve this by using scrollTo method or you have like multiple choices to do so. Like you can calculate the width of an particular element ( by using element.scrollWidth ) and then you can do element.scrollTo left by

    element.scrollTo {
left: totalwidth / how much the bigger scroll you want. for example 10 ( so user have to click 10 times to reach at the end of the element list. ),
behaviour: smooth
};

    or you can also use scrollLeft property of javascript.