Question

我正在尝试为段落添加淡出效果，这是我所做的：

但是当我向下滚动时，淡入效果不会停留在div的底部：

我还在此代码笔中复制了该问题：https://codepen.io/bij0520/pen/XoQpEW是否有任何方法可以使褪色效果始终停留在div的底部？谢谢。

.container{
  position:relative;
  width:300px;
  max-height:100px;
  overflow-y:scroll;
}
.container:after{
  content:"";
  position:absolute;
  z-index:1;
	bottom:0;
	pointer-events: none;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
	width: 100%;
	height: 4rem;
}

<div class="container">
  <p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p>
</div>

Answer 1

样式表的一些更改对我有用。您希望p滚动而不是容器滚动。

.container{
      position:relative;
      width:300px;
      max-height:100px;  
    }
    .container p {
      overflow-y:scroll;
      max-height:100px;
    }
    .container:after{
      content:"";
      position:absolute;
      z-index:1;
    	bottom:0;
    	pointer-events: none;
    	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
    	width: 100%;
    	height: 4rem;
    }

<div class="container">
  <p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
  </p>
</div>

Answer 2

您可以添加一个额外的容器，但它也会覆盖滚动条（您可以减小宽度）

.container {
  width: 300px;
  max-height: 100px;
  overflow-y: scroll;
}

.wrap:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
  width: 100%;
  height: 4rem;
}

.wrap {
  display: inline-block;
  position: relative;
}

<div class="wrap">
  <div class="container">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</div>

或者考虑使用position:sticky

.container {
  width: 300px;
  max-height: 100px;
  overflow-y: scroll;
  position: relative;
}

p {
 margin-top:-100px;
}

.container:before {
  content: "";
  display:block;
  position: sticky;
  height:100px;
  width: 100%;
  z-index: 1;
  top: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%) bottom/100% 4rem no-repeat;
}

<div class="container">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>

这里是background-attachment:fixed的另一种想法，但是缺点是您需要根据页面中容器的位置来调整渐变的位置（找到正确的值可能很麻烦）。 / p>

.container {
  width: 300px;
  max-height: 100px;
  overflow-y: scroll;
}
p {
  position: relative;
}
.container p:before {
  content: "";
  position:absolute;
  height:100%;
  width: 100%;
  z-index: 1;
  top: 0;
  pointer-events: none;
  background: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%) 
    0 calc(100px - 4rem + 8px)/100% 4rem no-repeat fixed;
    /*    ^ height of container - height of gradient + top body margin*/
}

<div class="container">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>

Answer 3

您可以使用::after或::before：

p {
  overflow-y: scroll;
  height: 7em;
}

.fadeOut {
  position: relative;
  height: 7em;
}

.fadeOut::after {
  position: absolute;
  content: '';
  display: block;
  height: 1em;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, white);
}

<div class=fadeOut>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum vitae urna quis mattis. Cras et dui vulputate, tempus mi tincidunt, finibus leo. Proin magna elit, ultricies vitae tristique eget, luctus vitae sem. Proin massa massa, fermentum sed
    pulvinar a, luctus in ex. Sed consequat nec quam vel semper. Vestibulum mollis, risus ut molestie viverra, turpis purus mollis est, ut venenatis mauris felis nec lectus. Sed vel blandit est, sit amet commodo est. Cras ultrices, ligula quis tincidunt
    accumsan, justo tortor aliquet erat, eget finibus nunc purus nec felis. Integer fringilla, quam et suscipit rutrum, urna nisl efficitur velit, vitae placerat nulla est quis eros. Integer nisl elit, iaculis id laoreet ut, accumsan vel lorem. In scelerisque
    at nulla sed euismod. Aliquam erat volutpat. Praesent non velit ut enim lacinia laoreet non id dolor. Suspendisse ut lectus orci. Aenean neque sem, cursus ornare rutrum a, facilisis vitae magna. Phasellus efficitur sed turpis at mollis. Quisque consequat
    ut risus eu iaculis. Donec nec eros faucibus, bibendum mi in, congue dui. Aenean pretium vehicula velit ac maximus. Curabitur blandit justo ut mi fermentum tincidunt. Aliquam sit amet pellentesque arcu. Suspendisse ultricies, ligula vel iaculis ornare,
    est neque finibus enim, vitae ullamcorper eros erat id mi. Cras rhoncus mauris laoreet commodo porttitor. Sed pretium, nibh vitae maximus ultrices, dui purus finibus mauris, nec ultrices neque lectus eu justo. Sed vitae metus nunc. Vestibulum laoreet
    sed metus ut porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque libero est, interdum ut sem nec, pellentesque tincidunt diam. Praesent felis est, molestie vel dui et, commodo auctor sapien. Nam
    tortor purus, egestas in porttitor id, posuere vel metus. Nullam feugiat imperdiet mauris nec vehicula. Praesent iaculis est sed lacinia lacinia. Etiam iaculis nibh in arcu efficitur, sit amet lacinia ligula porta. Vivamus varius lacinia magna. Praesent
    imperdiet velit ac nulla pulvinar, sit amet rhoncus felis mattis. Ut condimentum eu ligula vitae efficitur. Nunc finibus sapien id ipsum imperdiet cursus. Mauris vel nunc a ex feugiat condimentum sit amet at dolor. Nulla nulla leo, hendrerit quis
    velit at, eleifend placerat diam. Proin efficitur ligula ut lacus blandit ornare. Fusce ultricies diam nec lobortis feugiat. Sed ut orci posuere, ultricies lectus a, porttitor libero. In sagittis tellus euismod, faucibus libero eu, molestie sapien.
    Phasellus sed ipsum molestie, gravida tortor eget, sodales neque. Fusce elementum ligula tristique, auctor neque sit amet, dapibus turpis. Nullam in diam facilisis, dignissim magna et, convallis purus. Pellentesque sodales ligula id nisi ullamcorper,
    id euismod mauris rutrum. Donec venenatis erat eu dui placerat porttitor. Praesent vulputate ultrices erat, id tristique lorem varius ultricies. Morbi nec sem eget nibh bibendum vestibulum non vel ipsum. Donec eget quam justo. Ut nisl orci, gravida
    at pulvinar sed, suscipit ac orci. Etiam ante nunc, commodo ut condimentum non, iaculis semper dolor. Donec mauris libero, tempor at odio non, scelerisque suscipit odio. Ut eget finibus urna. Mauris quis mollis orci, eget dictum lectus. Morbi nec
    massa fermentum, faucibus sapien a, condimentum leo. Vestibulum laoreet dictum enim in imperdiet. Vivamus commodo leo elementum libero mattis, in sodales arcu pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Integer a molestie nibh. Etiam quis justo sed ante volutpat iaculis sed nec enim.
  </p>
</div>

段落淡出底部

3 个答案: