滚动导航栏在右侧透明吗？

Question

我在下面附上一张图片。基本上，有一个带有列表项的导航栏。如您所见，Overflow-y是滚动，我们可以向右滚动（然后向左滚动）。我想在滚动之前仅使右侧透明，就像在图片中一样。然后当我结束时，只有左侧应该是透明的。这在CSS中可能吗？我正在该网站上使用ReactJS（如图中的移动优先方法），因此，如果我需要在这里使用React而不是CSS，也可以。等待亲切的答复，谢谢您的帮助！

Answer 1

您可以利用一些几乎新的CSS功能来进行剪切/遮罩：

public interface BlaInterface {
    public String getData();
}

public abstract class AbstractBla implements BlaInterface {

    // methot to test only once and not for each class extending this
    public void execute() {

        // do some stuff which is the same for each extending class
        getData();
    }
}

public class BlaBla extends AbstractBla {

    public String getData() {
        return "Blabla";
    }
}

如果您可以添加任何代码，我们将更加精确。

Answer 2

使用导航栏上的overflow: hidden和:pseudo元素创建渐变

nav {
    overflow: hidden;
    max-width: 200px;
    position: relative;
    white-space: nowrap;
    background: #FFF;
    box-shadow: 1px 1px 2px #ccc;
}
nav::after {
    content: '';
    position: absolute;
    left: 200px;
    margin-left: -20px;
    width: 20px;
    height: 100%;
    top: 0;
    background: linear-gradient(to right, rgba(240, 244, 245, 0), rgba(240, 244, 245, 1));
}

nav a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  color: #333;
}

<nav>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
</nav>