滚动滚动条

Question

我正在尝试为页面的移动版本创建带有渐变渐变的导航栏。为了演示我的描述，请看一下Google搜索结果页面的移动版本。当您滚动水平导航栏（带有指向新闻，购物，图像等子页面的链接）时，文本的最左侧和右侧逐渐淡出。

如您所见，每个导航栏在相对于视口的相同位置和相对于导航链接的不同位置显示渐变。首先，渐变在“ alles”和“ shopping”上，第二，渐变在“ alles”和“ m”在地图上，第三，渐变在“ news”上，没有文本距离右侧足够远，可以产生渐变。

这里的挑战是文本需要可滚动，并且渐变需要保持在视口中的同一位置。梯度相对于文本的位置需要随着文本滚动而改变。

我为使用CSS的渐变文本找到的所有解决方案都涉及将-webkit-linear-gradient背景与-webkit-background-clip: text;和-webkit-text-fill-color: transparent;一起使用。基本上，这会创建一个渐变背景，使文本轮廓化，然后使文本不可见，从而可以看到背景。背景不滚动。

使用CSS可以解决此问题吗？

谢谢！

Answer 1

我会使用pointer-event: none;在您的酒吧上方创建一个溢出的div。该div将再次包含从白色到透明再到白色的渐变背景。可以使用CSS或图片来完成。

.bar {
  position: relative;
  width: 100%;
  background-color: white;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
}

<div class="bar">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  <div class="gradient">
  </div>
</div>

Answer 2

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
}

.nav-outter {
    position: relative;
}

.nav-outter::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
    content: '';
    background: linear-gradient(to right, #fff, transparent);
    pointer-events: none;
}

.nav-outter::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    content: '';
    background: linear-gradient(to left, #fff, transparent);
    pointer-events: none;
}

.nav {
    width: 100%;
    display: flex;
    background-color: #ddd9d9;
    box-shadow: 0 2px 10px rgba(128, 128, 128, 0.336);
    overflow: auto;
}

.nav-link {
    padding: 10px 20px;
    border-bottom: 3px solid transparent;
}

.nav-link:hover {
    border-bottom-color: dodgerblue;
    cursor: pointer;
    transition: .3s;
}

<div class="nav-outter">
	<div class="nav">
		<div class="nav-link">Home</div>
		<div class="nav-link">Images</div>
		<div class="nav-link">News</div>
		<div class="nav-link">Videos</div>
		<div class="nav-link">Home</div>
		<div class="nav-link">Images</div>
		<div class="nav-link">News</div>
		<div class="nav-link">Videos</div>
		<div class="nav-link">Home</div>
		<div class="nav-link">Images</div>
		<div class="nav-link">News</div>
		<div class="nav-link">Videos</div>
		<div class="nav-link">Home</div>
		<div class="nav-link">Images</div>
		<div class="nav-link">News</div>
		<div class="nav-link">Videos</div>
	</div>
</div>