从遮罩图像中排除滚动条

Question

我有一个水平菜单，边缘带有蒙版图像，但是滚动条包含在蒙版中并且边缘已褪色，如何在 div 的下部创建另一个蒙版以完全显示滚动条？

我尝试在底部使用

mask-size

，但滚动条完全隐藏了。

  mask-size: 100% 85%;
  mask-position: top;
  mask-repeat: no-repeat;

.nav {
  width: 400px;
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 97%, rgba(255, 255, 255, 0) 100%);
  padding-bottom: 20px;
}

.menu {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

<nav class="nav">
  <div class="menu">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
  </div>
</nav>

Answer 1

使用

inline-block

包装器并将遮罩图像应用到其上。在您的情况下，如果除了

menu

之外没有任何子元素，您可以简单地将遮罩图像移动到

menu

上。

.nav {
  width: 400px;
  overflow-x: auto;
  border: 1px solid red;
  padding-bottom: 20px;
}

.wrapper {
  display: inline-block;
  mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 97%, rgba(255, 255, 255, 0) 100%);
}

.menu {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

<nav class="nav">
  <div class="wrapper">
    <div class="menu">
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
    123456789
</nav>