添加水平滚动阴影效果

Question

我想添加一个内嵌阴影来指示有更多内容需要滚动。最好的解释方式是通过一张图片：

我正在使用 Bootstrap 框架，这正是我正在处理的内容:

以下是代码:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>

- mfragale

---

类似问题：https://dev59.com/HKPia4cB1Zd3GeqPyXCb - Abdull

Answer 1

您可以使用以下背景CSS实现水平滚动阴影效果。

.table-responsive{
  background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 20, .50), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 20, .50), rgba(255, 255, 255, 0));
  /* Shadows */
  /* Shadow covers */
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
  }

示例： https://jsfiddle.net/3oxq1ju6/1/

- HDP

---

我之前在使用Chrome时它无法运行。但现在我换成了Safari和Firefox，它们都能完美地运行。谢谢！有没有办法也让它在Chrome上运行？ - mfragale

最新版的Chrome在Mac笔记本电脑上使用效果不佳，@HDP。在我连接外部显示器时可以使用，但是在内置笔记本电脑显示器上无法使用。请帮忙解决一下。 - benlevywebdesign

我想在这里补充一点，如果您计划在渐变中使用与背景色相同的颜色，则无法使用。这是有道理的，因为它是一个背景图像，放在子元素后面。 - Eddy Vinck

当嵌套的<tr>元素具有背景颜色时，例如tr {background: red;}，这个解决方案无法使用。因为滚动阴影效果附加在行后面，而行的背景颜色会遮盖它。如何解决这个问题？ - Abdull

这在当前版本的Chrome、Safari和Firefox上运行良好。然而，在Edge上直到滚动才会显示阴影。 - Nick K9