js 上下循环滚动-js实现滚动条：代码示例

1、在JavaScript中，我们可以通过使用循环结构来实现滚动条的上下滚动效果。循环结构可以让我们重复执行一段代码，从而实现滚动条的滚动效果。

以下是一个示例代码，演示了如何使用循环结构实现滚动条的上下滚动效果：

// 获取滚动条元素
var scrollBar = document.getElementById("scrollBar");
// 设置滚动条的初始位置
var position = 0;
// 定义滚动条的滚动速度
var speed = 2;
// 定义滚动条的滚动方向（向上或向下）
var direction = "down";
// 定义滚动条的滚动范围
var maxPosition = 100;
// 定义滚动条的滚动函数
function scroll() {
  // 根据滚动方向更新滚动条的位置
  if (direction === "down") {
    position += speed;
  } else {
    position -= speed;
  }
  // 当滚动条到达顶部或底部时，改变滚动方向
  if (position >= maxPosition || position <= 0) {
    direction = direction === "down" ? "up" : "down";
  }
  // 更新滚动条的位置
  scrollBar.style.top = position + "px";
  // 循环调用滚动函数，实现滚动效果
  requestAnimationFrame(scroll);
}
// 调用滚动函数，开始滚动效果
scroll();

在这段代码中，我们首先获取了一个滚动条元素，并设置了滚动条的初始位置、滚动速度、滚动方向和滚动范围。然后，我们定义了一个滚动函数，该函数根据滚动方向更新滚动条的位置，当滚动条到达顶部或底部时，改变滚动方向。我们使用`requestAnimationFrame`方法循环调用滚动函数，实现滚动效果。

通过这段代码，我们可以实现一个简单的滚动条的上下滚动效果。你可以根据实际需求修改滚动条的初始位置、滚动速度、滚动方向和滚动范围，以及滚动条元素的样式，来适应不同的场景。