Question

我有一张桌子在移动设备上太宽而且拉开屏幕。因此，我允许水平滚动它的父级，以便用户仍然可以看到内容。我试图在容器的右侧添加一个轻微的渐变，以表明有更多内容，如下所示：

.parent {
  width: 100%;
  overflow-x: auto;
  position: relative;
}
.wide {width:1000px;}

.parent:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  height: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,000000+100&0+0,0.64+100 */
  background: -moz-linear-gradient(left,  rgba(30,87,153,0) 0%, rgba(0,0,0,0.64) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(30,87,153,0) 0%,rgba(0,0,0,0.64) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(30,87,153,0) 0%,rgba(0,0,0,0.64) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#a3000000',GradientType=1 ); /* IE6-9 */
  z-index: 1;
}

<div class="parent">
  <div class="div wide">
    <p>dfsakf djfsdklfskld fds fsduj fh ghj gy jhuyuy gu jhg hg jhgjh gjh g hjgjh h gjh gjh ghjgh g hjgjh g jhg jh ghj gh g jhg jhg hg j</p>
  </div>
</div>

但是，当用户滚动时，psuedo元素会移动，并且不再存在正确的地方。

Answer 1

最佳解决方案是将渐变设置为parent，这将阻止其滚动：

.parent {
  width: 100%;
  overflow-x: auto;
  position: relative;
    background: linear-gradient(to right, transparent 0%, transparent 95%, rgba(30, 87, 153, 0) calc(100% - 15px), rgba(0, 0, 0, 0.64) 100%);
}
.wide {
  width: 1000px;
}

<div class="parent">
    <div class="div wide">
      <p>dfsakf djfsdklfskld fds fsduj fh ghj gy jhuyuy gu jhg hg jhgjh gjh g hjgjh h gjh gjh ghjgh g hjgjh g jhg jh ghj gh g jhg jhg hg j</p>
    </div>
  </div>

如果您想使用伪元素......

如果父高不是动态的，您可以将伪元素的position更改为fixed，并为其设置固定高度。

.parent {
  width: 100%;
  overflow-x: auto;
  position: relative;
}
.wide {width:1000px;}

.parent:before {
  content: "";
  position: fixed;
  right: 0;
  top: 0;
  width: 15px;
  height: 70px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,000000+100&0+0,0.64+100 */
  background: -moz-linear-gradient(left,  rgba(30,87,153,0) 0%, rgba(0,0,0,0.64) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(30,87,153,0) 0%,rgba(0,0,0,0.64) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(30,87,153,0) 0%,rgba(0,0,0,0.64) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#a3000000',GradientType=1 ); /* IE6-9 */
  z-index: 1;
}

<div class="parent">
  <div class="div wide">
    <p>dfsakf djfsdklfskld fds fsduj fh ghj gy jhuyuy gu jhg hg jhgjh gjh g hjgjh h gjh gjh ghjgh g hjgjh g jhg jh ghj gh g jhg jhg hg j</p>
  </div>
</div>

另一个伪元素解决方案是将parent包装在另一个div（示例中为.wrapper）中，并将其用作伪元素的容器：

.parent {
  width: 100%;
  overflow-x: auto;
  position: relative;
}
.wide {
  width: 1000px;
}

.wrapper {
  position: relative; 
}

.wrapper:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  height: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,000000+100&0+0,0.64+100 */
  background: -moz-linear-gradient(left, rgba(30, 87, 153, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(30, 87, 153, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(30, 87, 153, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001e5799', endColorstr='#a3000000', GradientType=1);
  /* IE6-9 */
  z-index: 1;
}

<div class="wrapper">

  <div class="parent">
    <div class="div wide">
      <p>dfsakf djfsdklfskld fds fsduj fh ghj gy jhuyuy gu jhg hg jhgjh gjh g hjgjh h gjh gjh ghjgh g hjgjh g jhg jh ghj gh g jhg jhg hg j</p>
    </div>
  </div>

</div>

绝对定位的psuedo元素滚动与父

1 个答案: