在屏幕中向上滚动

在很多场合中，我们需要在屏幕上实现类似于向上滚动的效果，例如新闻客户端的热点新闻、赛事直播的比分更新等等。

方案一：使用CSS动画

我们可以使用CSS3中的animation属性实现这一效果。首先，需要一个CSS样式来描述你要向上滚动的元素，例如一个<div>：

<div class="scroll-container">
  <span>这里是要滚动的内容</span>
</div>

然后，使用以下CSS样式来将该元素设置成向上滚动：

.scroll-container {
  overflow: hidden;
  position: relative;
}

.scroll-container span {
  display: block;
  position: absolute;
  top: 0;
  animation: scroll-up 10s linear infinite;
}

@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

这里的.scroll-container是外层的容器，我们将其设置为overflow: hidden以隐藏超出部分。同时，我们将要滚动的元素设置为position: absolute，并将其top属性设置为0，使其与容器顶部对齐。

最后，我们定义一个scroll-up的动画，使元素在10秒钟内向上移动100%（即我们要滚动的元素高度），并设置为无限次循环。

方案二：使用JavaScript

在一些需要更加复杂的滚动效果时，我们可以使用JavaScript来实现。具体来说，我们可以通过定时器和DOM操作来实现元素的滚动。

<div id="scroll-container">
  <ul>
    <li>第一条新闻</li>
    <li>第二条新闻</li>
    <li>第三条新闻</li>
  </ul>
</div>

我们将滚动效果作用于<ul>元素上，在其中加入一些<li>元素作为要滚动的内容。

然后，我们可以使用以下JavaScript代码，定义一个滚动函数：

function scrollUp() {
  var ul = document.getElementById('scroll-container').getElementsByTagName('ul')[0];
  var liHeight = ul.getElementsByTagName('li')[0].offsetHeight;
  ul.style.top = -liHeight + 'px';
  var lastChild = ul.lastElementChild;
  var firstChild = ul.firstElementChild;
  ul.insertBefore(lastChild, firstChild);
  ul.style.transition = 'none';
  ul.style.top = '0';
  setTimeout(function() {
    ul.style.transition = 'top 1s';
    ul.style.top = -liHeight + 'px';
  }, 0);
}

这里，我们首先获取到<ul>元素，并计算出其内部<li>元素的高度。接着，我们将<ul>元素向上移动一个<li>元素的高度，并将最后一个<li>元素插入到<ul>元素的第一个位置。然后，我们取消动画的过渡效果，并将<ul>元素的位置设置为0，即还原到最初的位置。最后，我们在一个短暂的延时后，重新设置过渡效果，并将<ul>元素向上移动一个<li>元素的高度，实现滚动效果。

我们可以使用以下代码来定时调用滚动函数，并设定每隔3秒进行一次滚动：

setInterval(function() {
  scrollUp();
}, 3000);

总结

在屏幕中向上滚动是一种经常出现的需求，我们可以通过CSS动画和JavaScript来实现。使用CSS动画可以较为简单地实现一些基础的效果，而使用JavaScript则可以满足更为复杂的需求。