javascript实现简单滚动窗口

关于“javascript实现简单滚动窗口”的完整攻略，以下是详细的步骤。

步骤1：布局

首先，我们需要创建网页的基本布局。通常我们会将滚动窗口嵌套在一个父容器中。该父容器应该设置一个固定的高度和一个相对定位，以便子元素可以使用绝对定位进行定位。此外，您应该为子元素设置一个相对定位，并且将它们任意地分配给您需要的位置。

<div class="scroll-container">
  <div class="scroll-item" style="top:0">1</div>
  <div class="scroll-item" style="top:30px">2</div>
  <div class="scroll-item" style="top:60px">3</div>
  <div class="scroll-item" style="top:90px">4</div>
  <div class="scroll-item" style="top:120px">5</div>
</div>

步骤2：样式

接下来，为滚动容器和子元素添加一些基本的样式。

.scroll-container {
  position: relative;
  height: 150px;
  overflow: hidden;
}
.scroll-item {
  position: absolute;
  height: 30px;
  width: 100%;
}

步骤3：添加滚动功能

现在我们需要添加JavaScript代码来实现滚动功能。我们可以使用setInterval函数，并在每次滚动时调整子元素的位置来实现这一点。

var items = document.querySelectorAll('.scroll-item');
var topValue = 0;
setInterval(function() {
  topValue--;
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    item.style.top = topValue + i * 30 + 'px';
    if (parseInt(item.style.top) < -30) {
      item.style.top = (items.length - 1) * 30 + 'px';
    }
  }
}, 20);

这里我们使用querySelectorAll函数选择所有的滚动子元素，并将它们存储在一个数组中。我们使用setInterval函数来定期更改子元素的位置，并使用topValue变量来记录滚动窗口的位置。我们还将30作为子元素之间的间距。

在循环中，我们遍历每个子元素，设置它们的位置，并在它们到达滚动窗口顶部之后将它们重新定位到底部。最后，我们使用20毫秒的时间间隔进行滚动。

步骤4：效果展示

下面是一个完整的示例，可以将其添加到HTML文档中，并查看效果。此示例使用了不同的颜色和文本，以使滚动更清晰：

<div class="scroll-container">
  <div class="scroll-item" style="top:0; background:red; color:white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="scroll-item" style="top:30px; background:blue; color:white">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  <div class="scroll-item" style="top:60px; background:green; color:white">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="scroll-item" style="top:90px; background:yellow; color:black">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
  <div class="scroll-item" style="top:120px; background:orange; color:white">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

.scroll-container {
  position: relative;
  height: 150px;
  overflow: hidden;
}
.scroll-item {
  position: absolute;
  height: 30px;
  width: 100%;
  line-height: 30px;
  padding: 0px 10px;
  font-weight: bold;
}

var items = document.querySelectorAll('.scroll-item');
var topValue = 0;
setInterval(function() {
  topValue--;
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    item.style.top = topValue + i * 30 + 'px';
    if (parseInt(item.style.top) < -30) {
      item.style.top = (items.length - 1) * 30 + 'px';
    }
  }
}, 20);

在此示例中，我们使用了五个子元素，每个子元素都有不同的背景颜色和内容。当您在浏览器中查看此示例时，您将看到滚动窗口连续地滚动每个子元素，当到达底部时，开始滚动到最上方。