【CSS】分步讲解列表滚动的实现过程

先看下滚动列表的效果

实现原理

将列表元素绝对定位

根据动态列表的截屏，将每一项的新闻按照绝对定位布局，第一个item已经滚动到列表上部，top值为-320px(标题高度+摘要高度);第二个item是正在展示摘要信息，top值应为0px; 其余item根据标题的高度，依次设置top值的位置，并将摘要信息透明度设置为0。关键代码如下：

.content{
  opacity:0;//摘要内容透明度为0，有高度，但不显示
}
.item-1 .content,
.item-2 .content{
  opacity:1;//展示摘要内容
}
.item{
  display: inline-block;
  position: absolute;
}
.item-1{
  top: -320px;//已经滚动列表的外部，看不见了，所以设置为负值
}
.item-2{
  top: 0;//正展示在列表的顶部，
}
.item-3{
  top: 100px;//依次定位标题的位置。
}
.item-4{
  top: 130px;//依次定位标题的位置。
}
.item-5{
  top: 160px;//依次定位标题的位置。
}
.item-6{
  top: 190px;//依次定位标题的位置。
}
.item-7{
  top: 220px;//依次定位标题的位置。
}
.item-8{
  top: 250px;//依次定位标题的位置。
}
.item-9{
  top: 280px;//依次定位标题的位置。
}
.item-10{
  top: 310px;//依次定位标题的位置。
}
//新闻列表的结构
<div id="list">
    <div class="item item-1">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item  item-2">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item item-3">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item item-4">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item item-5">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item item-6">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item item-7">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item item-8">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item item-9">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
    <div class="item item-10">
      <div class="title">这里是标题</div>
      <div class="content">这里是新闻内容</div>
    </div>
</div>

周期地更改元素类名

每个5s中，将第一个元素放到列表的末尾。同时修改类名。

function changeArr(){
  let list = document.getElementById('list');
  let arrItem = document.getElementsByClassName('item');
  list.appendChild(arrItem[0]);
  for(let i=0; i< arrItem.length; i++){
     arrItem[i].className = 'item item-'+(i+1);
   }
}
setInterval(changeArr, 5000)

看下效果，现在效果还很生硬。一个一个变化，没有滚动的效果。

添加过度效果

给元素添加过度效果，产生从下向上滚动的视觉效果。

.item{
  display: inline-block;
  position: absolute;
  transition: 1s ease-in;
}

总结

本文通过三步实现了列表的滚动效果。

• 步骤一：根据静态效果图，将元素设置为绝对定位。
• 步骤二：周期的替换元素的类名。将第二个元素变为第一个元素，第三个元素变为第二个元素，依次类推。
• 步骤三：给每一个元素加上过度效果。

查看源码