使用按钮向左/向右滑动

Question

我在移动设备上有这个用户界面：

用户可以水平滑动字符列表。滑动是通过在保存角色徽章的容器上使用此 CSS 来实现的：

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

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

使用 JavaScript，我添加了 < and > 按钮。如何实现当用户触摸“< button" and a little bit to the right when the user touches the ">按钮”时可滑动区域向左移动一点？

Answer 1

您可以通过使用scrollTo方法来实现这一点，或者您有多种选择来实现这一点。就像你可以计算特定元素的宽度（通过使用

element.scrollWidth

），然后你可以做

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
};

或者你也可以使用 javascript 的

scrollLeft

属性。