javascript - 如何淡入和淡出水平滚动的内容？

Question

我的网站上有水平滚动内容，但是当您滚动时，它只会将其从页面上切断，非常严厉。我想让它淡出。我附上了一张显示我的意思的图片，上面的照片是现在正在发生的事情，下面的照片显示了我想要实现的目标。 我尝试添加框阴影并将其插入，但它显示在文本下方。我仍然希望滚动内容可点击，我只是希望它在左侧和右侧淡出。

CSS

.slider {
 width: 100%;
 height: 100%;
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 margin: 50px 0 20px 0;
 position: relative;
}

.taglink {
 padding: 6px 16px;
 cursor:pointer;
 border: 3px solid #3d3d3d;
 color: #3d3d3d;
 border-radius: 25px;
 position: relative;
 text-align: center;
 margin: 20px 7px 20px 7px;
 display: inline-block;
 flex-shrink: 0;
}

HTML

<center>

<div style="margin: 0 5%">

<div class="slider">

<div class="taglink">
Slider01
</div>
  
  <div class="taglink">
Slider02
</div>
  
  <div class="taglink">
Slider03
</div>
  
<div class="taglink">
Slider04
</div>
 
  <div class="taglink">
Slider05
</div>
  
  <div class="taglink">
Slider06
</div>
  
  <div class="taglink">
Slider07
</div>
  
  <div class="taglink">
Slider08
</div>

<div class="taglink">
Slider09
</div>
  
  <div class="taglink">
Slider10
</div>
  
  <div class="taglink">
Slider12
</div>
  
<div class="taglink">
Slider13
</div>
 
  <div class="taglink">
Slider13
</div>
  
  <div class="taglink">
Slider14
</div>
  
  <div class="taglink">
Slider15
</div>
</div>
</div>
</center>

Answer 1

选项之一:

为 div.slider 添加换行并在之后和之前使用

.slider_wrap{
  width: 100%;
  overflow:hidden;
  position:relative;
  }
.slider_wrap:before{
  content:'';
  height: 100%;
  width:50px;
  background:linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  position: absolute;
  top:0;
  left:0;
  z-index:1;
  }
.slider_wrap:after{
  content:'';
  height: 100%;
  width:50px;
  background:linear-gradient(-90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  position: absolute;
  top:0;
  right:0;
  z-index:1;
  }
   .slider {
     width: 100%;
     height: 100%;
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     margin: 50px 0 20px 0;
     position: relative;
    }

  .taglink {
     padding: 6px 16px;
     cursor:pointer;
     border: 3px solid #3d3d3d;
     color: #3d3d3d;
     border-radius: 25px;
     position: relative;
     text-align: center;
     margin: 20px 7px 20px 7px;
     display: inline-block;
     flex-shrink: 0;
    }

<center>

<div style="margin: 0 5%">
<div class="slider_wrap">
<div class="slider">

<div class="taglink">
Slider01
</div>
  
  <div class="taglink">
Slider02
</div>
  
  <div class="taglink">
Slider03
</div>
  
<div class="taglink">
Slider04
</div>
 
  <div class="taglink">
Slider05
</div>
  
  <div class="taglink">
Slider06
</div>
  
  <div class="taglink">
Slider07
</div>
  
  <div class="taglink">
Slider08
</div>

<div class="taglink">
Slider09
</div>
  
  <div class="taglink">
Slider10
</div>
  
  <div class="taglink">
Slider12
</div>
  
<div class="taglink">
Slider13
</div>
 
  <div class="taglink">
Slider13
</div>
  
  <div class="taglink">
Slider14
</div>
  
  <div class="taglink">
Slider15
</div>
</div>
</div>
</div>
</center>