html - 子容器的box-shadow叠加滚动条

Question

所以我在一个页面上工作，在该页面上，移动设备上所需的行为是让所有链接在导航中水平显示，如果它们共同太宽则通过溢出隐藏。为了向用户表明 scoll 上还有其他元素，我添加了一个不透明的白色框阴影，它会稍微遮盖被覆盖的链接。目前，此阴影已添加到带有“立即购买”按钮的相邻容器中。

这是显示当前行为的代码笔:

http://codepen.io/thecox/pen/wWWrej?editors=1100

少

.sticky-nav-menu {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
  margin: 0;

  li {
    display: inline-block;
    white-space: nowrap;
    padding-right: 25px;
    margin-right: 0;

    &.active a {
      color: fade(@jet-dark, 80);
    }

    &:last-of-type {
      margin-right: 0;
    }
  }
}

.sticky-nav-overflow {
  height: 100%;
  margin-right: 4%;
  overflow: scroll;
}

.sticky-nav-mobile {
  padding-left: 2%;
  z-index: 1;
  box-shadow: -10px 0 5px 13px rgba(255, 255, 255, 1);
}

HTML

<nav class="sticky-nav js-sticky-nav clearfix">
  <div class="sticky-nav-inner">
    <div class="sticky-nav-overflow">
      <ul class="sticky-nav-menu">
        <li class="active">
          <a href="#lorem" class="sticky-nav-link">THE LOREM</a>
        </li>
        <li>
          <a href="#lorem" class="sticky-nav-link">THE IPSUM</a>
        </li>
        <li>
          <a href="#lorem" class="sticky-nav-link">THE CAESAR SALAD</a>
        </li>
        <li>
          <a href="#lorem" class="sticky-nav-link">THE RIO GRANDE</a>
        </li>
      </ul>
    </div>
    <div class="sticky-nav-mobile">
      <a href="#" class="sticky-nav-cta">BUY NOW</a>
    </div>
  </div>
</nav>

将屏幕缩小到 400px 或以下(我主要在 Firefox 上看到这种行为，使用 devtools 调整大小)你会看到当链接容器滚动到最右边时，滚动条被框覆盖- 阴影以一种没有吸引力的方式。我想知道是否有人对如何使用当前结构解决这个问题有任何想法。或者任何其他可能产生更好结果的方法。

感谢任何和所有答案。感谢您的协助!

Answer 1

如果我理解正确，问题是屏幕上的框阴影覆盖了 400 像素以下的滚动条。例如，您可以通过将屏幕上的 margin right 值从 4% 更改为 8% 来避免这种情况。

.sticky-nav-overflow { margin-right: 8%;}