具有居中滚动条的水平滚动器

如何解决具有居中滚动条的水平滚动器

您将如何创建这样的内容：

这个想法是，您有一个水平的可滚动部分，并希望在下面显示滚动条。但是，您只希望滚动条成为主容器的宽度，以页面为中心。

在下面的链接中介绍了我的处理方式，但是尝试保持滚动条居中并不幸运。尝试使用最大宽度，但似乎没有任何影响。有什么想法吗？

.scroll-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 24px;
  -webkit-overflow-scrolling: touch;
  
  &::-webkit-scrollbar {
    width: 16px;
  }
  &::-webkit-scrollbar-track {
    background: #eee;
    // you'd think max-width or something here would be the solution
  }
  &::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 20px;
    border: 4px solid #eee;
  }
}

.scroll-wrapper > *:first-child {
  margin-left: 80px;
}

.scroll-item {
  flex: 0 0 auto;
  margin-right: 16px;
}

https://jsfiddle.net/tzdcay9r/1/

解决方法

我解决了它...可以在滚动条轨道?‍♂️

上使用边距

https://jsfiddle.net/8snuamhv/1/

&::-webkit-scrollbar-track {
    background: #eee;
    margin-left: 80px;
    margin-right: 80px;
}

或者，如果您想要更多动态的东西（例如，匹配容器的大小），则可以使用calc（）函数计算出边距值。

  $containerSize: 1120px;

  &::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 20px;
    margin-left: calc((100vw - $containerSize) / 2);
    margin-right: calc((100vw - $containerSize) / 2);

    @media (max-width: $containerSize) {
      margin-left: 16px;
      margin-right: 16px;
    }
  }