带有居中滚动条的水平滚动

Question

你会如何创建这样的东西：

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

链接在下面的 jsfiddle 中，说明我是如何处理它的，但是尝试使滚动条仅居中却没有成功。尝试使用最大宽度，但似乎没有任何影响。有什么想法吗？

.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/

Answer 1

我解决了…可以在scrollbar-track上使用边距 ‍♂️

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

带有居中滚动条的水平滚动

Horizontal Scroller with centered scrollbar

css

sass

overflow

scrollbar