水平滚动导航上的渐变蒙版

Question

我已经创建了一个纯css水平滚动导航。尽管我不确定一旦将导航滚动到溢出区域中，将如何应用它，但我正在尝试应用渐变蒙版。

根据此屏幕截图，它最初可以正常运行，但是一旦我滚动即可。

将div滚动到溢出内容中

.topnav {
  display: none;
  min-width: 100vw;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  padding-top: 60px;
  overflow: auto;
  white-space: nowrap;
}

.topnav div {
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
}
 .topnav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: inline-block;
      transition: color 0.3s;

  }

  .topnav a:hover {
      color: #f1f1f1;
  }

<div id="mytopnav" class="topnav">
  <div>
    <a class="navitem" href="#">About</a>
    <a class="navitem" href="#">Packages</a>
    <a class="navitem" href="#">Features</a>
    <a class="navitem" href="#">Blog</a>
    <a class="navitem" href="#" id="contact">Contact</a>
  </div>
</div>

我在导航中省略了一些js和其他组件，但只提供了关键部分。

我有点需要有人指出我正确的方向，以某种方式在导航项之前应用蒙版

Answer 1

首先，mask-image属性对浏览器的支持很差： https://caniuse.com/#feat=css-masks

我认为，更好的选择是使用渐变创建一个覆盖div并将导航项移到该渐变之外。

Item

在那之后，您可以说：

.[ ]

这将在您的导航项上方创建一个渐变，您可以滚动而无需滚动渐变。

Answer 2

我将创建一个伪元素，将其绝对定位并分层放置在您的导航顶部。

由于此渐变纯粹是装饰性的，因此我不会使用实际的html元素。

.topnav {
  position: relative;
  max-width: 500px;
  background-color: #111;
  padding-top: 60px;
  display: flex;
  justify-content: space-around;
}

.topnav a {
  color: white;
  text-decoration: none;
}

.topnav::after {
  pointer-events: none; /* ignore clicks */
  content: "";
  position: absolute;
  z-index: 100;
  height: 20px;
  left: 0;
  bottom: 0;
  width: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+50,000000+50,000000+100&1+0,0+50,1+100 */
  background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

<div id="mytopnav" class="topnav">
  <a class="navitem" href="#">About</a>
  <a class="navitem" href="#">Packages</a>
  <a class="navitem" href="#">Features</a>
  <a class="navitem" href="#">Blog</a>
  <a class="navitem" href="#" id="contact">Contact</a>
</div>