JavaScript window.scrollBy
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 window.scrollBy 方法。此方法对于以编程方式控制页面滚动至关重要，可实现平滑的导航体验。
基本定义
window.scrollBy 方法会按给定量滚动窗口中的文档。它接受 x 和 y 坐标作为参数，以确定水平和垂直滚动的距离。
与滚动到绝对位置的 window.scrollTo 不同，scrollBy 是相对于当前位置滚动的。这使其成为增量滚动效果的理想选择。
基本 scrollBy 示例
此示例演示了 window.scrollBy 的最简单用法，即在单击按钮时将页面向下滚动 100 像素。
<!DOCTYPE html>
<html>
<head>
<title>Basic scrollBy</title>
<style>
body { height: 2000px; }
button { position: fixed; }
</style>
</head>
<body>
<button onclick="scrollDown()">Scroll Down</button>
<script>
function scrollDown() {
window.scrollBy(0, 100);
}
</script>
</body>
</html>
在此基本示例中，我们有一个很长的页面和一个固定位置的按钮。单击该按钮会调用 scrollDown，后者使用 window.scrollBy 在垂直方向（y 轴）上向下滚动 100 像素。
第一个参数 (0) 控制水平滚动，第二个参数 (100) 控制垂直滚动。负值将向相反方向滚动。
平滑滚动行为
此示例展示了如何使用选项参数通过 window.scrollBy 启用平滑滚动行为。
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scrolling</title>
<style>
body { height: 2000px; }
button { position: fixed; top: 20px; }
</style>
</head>
<body>
<button onclick="smoothScroll()">Smooth Scroll</button>
<script>
function smoothScroll() {
window.scrollBy({
top: 300,
left: 0,
behavior: 'smooth'
});
}
</script>
</body>
</html>
在这里，我们使用了 scrollBy 的对象参数版本，它允许更多配置选项。behavior: 'smooth' 属性启用动画滚动，而不是默认的即时跳转。
这提供了更精致的用户体验，尤其是在滚动距离较大时。动画持续时间和缓动函数取决于浏览器。
水平滚动
此示例演示了使用 window.scrollBy 和水平容器进行水平滚动。
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrolling</title>
<style>
.container {
display: flex;
width: 3000px;
height: 200px;
background-color: #f0f0f0;
}
.item {
width: 300px;
height: 200px;
margin: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
<button onclick="scrollRight()">Scroll Right</button>
<button onclick="scrollLeft()">Scroll Left</button>
<script>
function scrollRight() {
window.scrollBy(300, 0);
}
function scrollLeft() {
window.scrollBy(-300, 0);
}
</script>
</body>
</html>
在此示例中，我们有一个带有多个项目的宽容器和两个按钮。这些按钮使用 scrollBy 在任一方向上水平滚动 300 像素。
正 x 值向右滚动，负值向左滚动。此技术对于创建带有自定义导航控件的水平图库或轮播非常有用。
按视口高度滚动
此示例展示了如何使用 window.innerHeight 和 scrollBy 按完整的视口高度滚动。
<!DOCTYPE html>
<html>
<head>
<title>Page Height Scrolling</title>
<style>
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
section:nth-child(odd) { background: #f0f0f0; }
section:nth-child(even) { background: #e0e0e0; }
</style>
</head>
<body>
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<button onclick="scrollPageDown()">Next Section</button>
<script>
function scrollPageDown() {
window.scrollBy({
top: window.innerHeight,
behavior: 'smooth'
});
}
</script>
</body>
</html>
在这里，我们有一个具有完整视口高度部分的页面。按钮通过使用 window.innerHeight 作为滚动量来滚动到下一部分。
这创建了现代单页应用程序中常见的“滚动吸附”效果。平滑的行为增强了用户在各部分之间的体验。
条件滚动
此示例演示了在达到特定边界时停止的条件滚动。
<!DOCTYPE html>
<html>
<head>
<title>Conditional Scrolling</title>
<style>
body { height: 2000px; }
#progress {
position: fixed;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<button onclick="smartScroll()">Smart Scroll</button>
<div id="progress">Scroll Progress: 0%</div>
<script>
function smartScroll() {
const scrollAmount = 100;
const maxScroll = document.body.scrollHeight - window.innerHeight;
if (window.scrollY + scrollAmount <= maxScroll) {
window.scrollBy(0, scrollAmount);
} else {
window.scrollTo(0, maxScroll);
alert("Reached bottom of page!");
}
// Update progress indicator
const progress = Math.round((window.scrollY / maxScroll) * 100);
document.getElementById('progress').textContent =
`Scroll Progress: ${progress}%`;
}
</script>
</body>
</html>
此示例实现了一个“智能”滚动，它会检查是否还有足够的内容可供滚动。它还会更新一个进度指示器，显示用户已滚动到页面的哪个位置。
代码计算了最大可能的滚动位置并阻止了超出该位置的滚动。当接近底部时，它使用 scrollTo 进行精确的定位并显示一个警报。
来源
在本文中，我们通过各种实际示例探讨了 window.scrollBy 方法。此方法对于创建自定义滚动行为和增强用户导航体验非常强大。
作者
列出 所有 JS DOM 教程。