Question

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

这是一个显示当前行为的codepen：

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

LESS

.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

如果我理解正确的问题是框阴影覆盖在屏幕上滚动400px。例如，您可以通过将屏幕上的边距右值从4％更改为8％来避免这种情况。

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

盒子阴影覆盖子容器

1 个答案: