javascript - 在水平滚动 flexbox div 的边缘实现滚动指示器

Question

在我的网站上，我在导航栏中使用了一个可水平滚动的 flexbox。我使用这篇博文的帮助来实现它，所以或多或少，我们有相同的代码:https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation

HTML:

<header class="scroll">
  <nav>
    <a class="item" href="http://example.com/blog">Blog</a>
    <a class="item" href="http://example.com/portfolio">Portfolio</a>
    <a class="item" href="http://example.com/downloads">Downloads</a>
    <a class="item" href="http://example.com/about">About</a>
    <a class="item" href="http://example.com/contact">Contact</a>
  </nav>
</header>

CSS:

.scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }
.item {
  flex: 0 0 auto; }

不过，该博文没有包括如何向边缘的导航栏添加指示器，以指示此栏可滚动并且右侧有更多内容。

我查找了一些解决方案，但没有一个与我在此处使用的 flexbox 技术非常吻合。这怎么能正确，整齐地完成呢？它需要花车吗？提前致谢!

Answer 1

您可以使用以下技术 我创建了这个 plunk 来展示它是如何工作的。 https://embed.plnkr.co/XzDEedEsgS1hDDmVuccZ/

.scroll {
  position: relative;
}

.scroll nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  position: relative;
}

.scroll:after { /* This is our indicator give it your custom style */
  content: ">>";
  position: absolute;
  width: 20px;
  right: 0;
  top: 0;
  color: #fff;
  padding: 0 10px;
  background: #333;
}

.item {
  flex: 1 1 auto;
  padding-right: 10px;
  background: #fff;
}

.item:last-child {
  position: relative;
  z-index: 9; /* higher z-index to get it above the indicator */
}