网页开发：轻松实现带悬停暂停效果的流畅滚动列表

2026-02-15 00:49:29

你必定碰到过那种页面出现卡顿状况的滚动列表，用户只要划动两下便无法再继续划动了，紧接着会直接把页面关闭然后离开。一个具备流畅特性的 scroll 效果，并非只是徒有其表的形式，从本质上来说都是留住用户以及提升浏览体验的关键举措体现。在当下情形中我们不需要去讲那些不切实际的内容或表述，直接开始手上的操作去制作一个能够自动开展滚动、当鼠标悬停在其上时便会暂停、整体视觉效果还显得干净简洁的效果呈现，所涉及的代码你在获取之后就能够直接加以运用。

先搭好HTML骨架

HTML结构之中滚动列表，实际上是颇为简单的，乃是有着一个大盒子包裹着一团小盒子啦，如果给外层容器定个名字的话，那就是scroll-container，它的作用是用以操控整个列表的位置以及大小，至于里面的每一项，则可以用。

和
• 重新进行组织，每一条相关内容放置于一段文字或者一个图标之中，如此这般结构方可清晰，而且搜索引擎也是会对其青睐有加的。

  为使列表内容充足到可形成滚动效果，我们起码要准备七八条数据，比如放置一些热门文章标题、用户评论或者商品名称，如此用户在一打开页面时就能见到内容在动，产生有真实数据的感觉。要是真的没有现成数据的话，用“列表项1”到“列表项8”占位也是可行的。

  用CSS把样子画出来

  此刻为这个列表添上衣物。率先设定外层容器的宽度与高度，像是宽度为300像素、高度为400像素，超出此范围的内容就得滚动予以显示。增添边框以及内边距，使得列表拥有呼吸感，可别挤在一块儿。背景颜色采用浅灰或者纯白，文字颜色为深灰，字号是16像素，这乃是当下网页阅读最为舒适的配置，就此呈现，没错吧。

  用CSS动画来实现核心的滚动效果。给列表内容添加一个名为scrollUp的animation属性，其时长设定为10秒，并且要循环播放。在@keyframes里去定义从0%到100%的transform位移，将整个列表向上移动一段距离， 这段距离恰好等于内容的总高度。如此一来内容就会如同电梯那般匀速上升。

  解决悬停暂停的交互

  列表被用户查看之际，鼠标极有可能移至某一个条目之上，意图进而仔细端详，此等时刻倘若内容依旧处于滚动状态，那么相应体验断然糟糕不堪。凭借:hover 伪类并搭配 animation-play-state:paused，于鼠标输入外层容器之时，促使动画予以暂停。当鼠标撤离之际，animation-play-state 恢复至默认的 running，动画遂继续开始播放。

  <div class="listWrap">
    <div class="list">
      <div>Item 1div>
      <div>Item 2div>
      <div>Item 3div>
      <div>Item 4div>
      <div>Item 5div>
      <div>Item 6div>
      <div>Item 7div>
      <div>Item 8div>
      <div>Item 9div>
      <div>Item 10div>
      <div>Item 11div>
      <div>Item 12div>
    div>
  div>
  

  需要留意这点细节了：悬停暂停并非仅能作用于列表项之上，而是要作用于整个滚动容器当中。原因在于鼠标有可能悬停于空白区域之上，又或者悬停于两条内容之间的缝隙处，在这种情形下暂停是无法触发的，用户依旧会感觉体验存在不连贯之状况。将hover添加至父容器之上能够涵盖覆所有状况了。

  调整滚动速度和流畅度

  是滚动的快慢被动画时长直接决定着 ，一轮滚动要10秒钟 ，当内容少的时候它显得慢 ，但是内容多的时候它又变得太快 ，须依据实际的数据量来进行调整 ，通常列表有8至10条 ，12秒延伸到15秒这个范围是比较适宜的 ，这样用户既能够看清每条内容 ，同时又无需等待太长的时间。

  在流畅度层面，借助transform的translateY达成滚动，而非运用top或者margin来操作，transform遵循的是GPU加速模式，效能更佳，不会引发页面重绘现象，60帧的丝滑感受依靠的便是它。另外增添一个ease - in - out的缓动函数，促使当初始以及结束之际有着轻微的减速状况，如此一来滚动便会显得更加自然顺遂。

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
  }
  .listWrap {
    width: 600px;
    height: 200px;
    border-radius: 10px;
    border: 2px solid #ccc;
    overflow: hidden;
    margin: calc(50vh - 100px) auto;
    position: relative;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
  }
  .listWrap:hover .list {
    animation-play-state: paused;
  }
  .list {
    position: absolute;
    transform: translateY(0); /* 确保初始时内容可见 */
    animation: scroll 12s linear infinite;
  }
  @keyframes scroll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  .list div {
    height: 40px;
    line-height: 40px;
    margin: 0 10px;
    font-size: 18px;
    color: #333;
    background: linear-gradient(135deg, #73a5ff, #5477f5);
    color: white;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  

  加上视觉细节提升质感

  列表项相互之间添加一条呈现为浅灰色的下方边框，在视觉层面上分隔起来会更加清晰，每项的内部边距上面和下面各为12像素，左面和右面各是16像素，如此一来文字便不会贴近边缘，阅读起来不会感到疲累，当鼠标悬浮停留在单个列表项之上的时候，背景颜色能够转变为浅蓝色或者浅灰色，从而给用户一个清晰明确的操作反馈。

  要是期望变得更为精细些，于外层容器靠右之处增添一个隐匿的滚动条，将其宽度设定成六像素，颜色调为浅灰，鼠标悬浮其上时滚动条透明度升高，去提示用户此处也能够手动进行滚动，诸多大型厂商网站都在运用这一细节，兼具美观性与实用性。

  实际应用场景和扩展思路

  特别适合用于侧边栏去展示热门文章、最新评论以及产品更新日志的，是这种自动滚动列表。像电商网站进行最近浏览过商品的展示，新闻网站开展头条新闻标题的展示，社区网站实施活跃用户动态的展示之类的情况。只要数据属于实时更新的范畴，列表滚动起来便会颇具活力。

  若是想着来点新奇的玩法，那么可将垂直滚动转变为水平滚动，把它应用于图片轮播或者品牌展示墙上。要么结合js动态加载数据，当列表滚动至底部时自动拉取下一页内容，如此无限滚动的体验会更加畅快。并且还能够给每条数据添加一个跳转链接，点击后直接进入详情页，这般流量转化便达成了。

  平常你做网页之时，会主动给列表增添自动滚动效果不，又或者是认为手动滚动便足够了，欢迎于评论区讲讲你的习惯，要是觉得此种写法具备用处的话，顺手去点个赞，以使更多朋友能够看到。

  上一篇 : 洋葱新闻起源：从8000美元投资小报到网站的发展

  下一篇: 新闻文体知识全解析，涵盖定义、分类及特点（含PPT讲解）

  【返回列表】