浅谈window对象的scrollBy()方法

在 Web 开发中，我们经常需要控制页面的滚动行为。而 window 对象提供了一些方法来控制滚动，其中一个常用的方法是 scrollBy()。它可以让我们以相对于当前滚动位置的偏移量来进行页面滚动。

scrollBy() 方法的语法和参数

scrollBy() 方法的语法如下：

window.scrollBy(x-coord, y-coord);

其中 x-coord 和 y-coord 分别表示水平和垂直方向上的滚动偏移量。它们可以是正数、负数或零，分别代表向右、向下和不滚动。

如果你想要使用一个对象来指定滚动偏移量，可以使用下面的语法：

window.scrollBy(options);

其中 options 是一个包含以下属性的对象：

• left：水平方向上的滚动偏移量。
• top：垂直方向上的滚动偏移量。
• behavior：滚动的行为。可选值包括 "auto"（默认）、"smooth" 和 "instant"。

scrollBy() 方法的指导意义

scrollBy() 方法的指导意义在于它可以使页面滚动更加灵活和自然。例如，在实现无限滚动列表时，可以使用 scrollBy() 方法来自动加载更多数据。

另外，scrollBy() 方法也可以用于构建自定义的滚动条。我们可以监听 scroll 事件，在滚动时调用 scrollBy() 方法来改变页面上的元素位置，从而实现自定义的滚动效果。

示例代码

下面是一个简单的示例，演示如何使用 scrollBy() 方法来控制页面滚动：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>scrollBy() 示例</title>
  <style>
    #container {
      height: 5000px;
      border: 1px solid black;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <p>这里是一些内容。</p>
  </div>
  <button onclick="scrollDown()">向下滚动</button>
  <button onclick="scrollUp()">向上滚动</button>
  <script>
    function scrollDown() {
      window.scrollBy(0, 100);
    }

    function scrollUp() {
      window.scrollBy(0, -100);
    }
  </script>
</body>
</html>

在该示例中，我们创建了一个包含固定高度和边框的容器，并将其设置为可滚动。然后在页面中添加了两个按钮，分别调用 scrollBy() 方法来向上或向下滚动页面。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3595