js 控制div滑动,代码示例

温馨提示：这篇文章已超过289天没有更新，请注意相关的内容是否还可用！

JS可以通过操作元素的样式来实现控制div滑动的效果。我们可以使用`scrollTop`属性来设置或获取元素内容的垂直滚动条位置。通过改变`scrollTop`的值，我们可以实现滑动效果。

我们需要获取要滑动的div元素的引用。可以使用`document.getElementById()`方法，通过传入元素的id来获取元素的引用。

然后，我们可以使用`addEventListener()`方法来为元素添加滚动事件的监听器。当滚动事件触发时，我们可以通过`scrollTop`属性来获取滚动条的位置。

接下来，我们可以根据滚动条的位置来判断滑动的方向，并根据需要改变div元素的样式。比如，当滚动条向下滑动时，我们可以通过设置`element.style.top`属性来改变div元素的位置，从而实现滑动效果。

以下是一个示例代码，演示如何使用JS控制div滑动：


<!DOCTYPE html>
<html>
<head>
  <style>
    #myDiv {
      position: relative;
      height: 200px;
      width: 200px;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="myDiv">
    <div id="content" style="height: 400px;">
      <!-- 这里放置要滑动的内容 -->
    </div>
  </div>
  <script>
    var myDiv = document.getElementById("myDiv");
    var content = document.getElementById("content");
    myDiv.addEventListener("scroll", function() {
      if (myDiv.scrollTop > 0) {
        content.style.top = -myDiv.scrollTop + "px";
      }
    });
  </script>
</body>
</html>

在上面的示例代码中，我们首先定义了一个div元素（id为"myDiv"），并设置了其样式为相对定位、高度为200px、宽度为200px、溢出为自动。然后，在div元素中放置了一个内容div（id为"content"），并设置了其高度为400px。

接着，我们使用`document.getElementById()`方法获取了myDiv和content的引用。然后，我们使用`addEventListener()`方法为myDiv添加了滚动事件的监听器。当滚动事件触发时，我们通过判断scrollTop的值是否大于0来判断滚动方向，并通过设置content元素的top属性来改变其位置，从而实现滑动效果。

请注意，上述示例代码中的滑动效果只是一个简单的示例，实际应用中可能需要根据具体需求进行相应的调整和扩展。

js 控制div滑动,代码示例

相关阅读