JS实现上下无缝滚动（不卡顿）

在许多网站的首页或者滚动页面中，我们经常会看到文字或者图片的上下无缝滚动效果。这种效果不仅能够吸引用户的注意力，还能够增加页面的动态性和互动性。今天，我将介绍一种使用JavaScript实现上下无缝滚动效果的方法，并且保证流畅不卡顿。

实现思路及方法

要实现上下无缝滚动效果，我们可以使用CSS3的transform属性来实现元素的平滑滚动。下面是具体的实现步骤：

1. HTML结构

首先，我们需要在HTML中定义一个包含滚动内容的元素，并为之添加一个容器：

<div class="scroll-container">
  <ul class="scroll-content">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    ...
  </ul>
</div>

2. CSS样式

我们需要为滚动容器和内容增加一些基本的CSS样式，以及设置内容的高度和上下无缝滚动的样式：

.scroll-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  position: absolute;
  top: 0;
  animation-name: scroll;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

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

3. JavaScript处理

最后，我们需要使用JavaScript来处理一些细节问题，比如动态获取滚动内容的高度，并设置滚动容器的高度和内容的样式：

window.addEventListener('DOMContentLoaded', function() {
  var scrollContainer = document.querySelector('.scroll-container');
  var scrollContent = document.querySelector('.scroll-content');
  var items = scrollContent.getElementsByTagName('li');
  var itemHeight = items[0].offsetHeight;
  
  scrollContainer.style.height = itemHeight + 'px';
  scrollContent.style.height = (itemHeight * items.length) + 'px';
});

效果演示

你可以点击这里查看上述实现方法的效果演示。你会发现，滚动内容会以一定的速度平滑上下滚动，无缝切换，整个效果流畅而不卡顿。

结语

通过使用CSS3的transform属性以及JavaScript的处理，我们可以实现一个简单而又流畅的上下无缝滚动效果。你可以将这个效果应用到你的网站上，增加页面的动态性和用户的体验感。希望这篇文章对你有所帮助！

本文来自极简博客，作者：心灵画师，转载请注明原文链接：JS实现上下无缝滚动（不卡顿）