JavaScript中关于滚动scrollBy()与scrollTo()的区别

王跃坤

已于 2022-03-23 13:08:43 修改

阅读量3k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2022-03-22 10:46:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43652327/article/details/123654572

版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文通过实例解析JavaScript中的scrollTo和scrollBy方法，比较它们的起点计算方式，并揭示了在连续点击时的不同效果：scrollTo保持固定位置，scrollBy按像素递增滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先说结论：

scrollBy(x,y)是根据当前位置来计算的
scrollTo(x,y)是从原点(0,0)开始计算的
x表示向右滚动的像素数，y表示向下滚动的像素数。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>王跃坤</title>
<script>
function Init(){
	var pp=document.getElementsByTagName("p");
	for(var i=0;i<pp.length;i++)
        if(i%10==0)continue;
        else pp[i].innerHTML=""+i;
}
function scrollWindow1(){
	window.scrollTo(100,200);
}
function scrollWindow2(){
	window.scrollBy(100,200);
}
</script>
</head>
<body>
    <input type="button" onclick="Init()" value="初始化" />
    <p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
    <p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p> 
	<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
	<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
	<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
	<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
	<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
	<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
	<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
	<p>滚动 滚动 滚动 滚动 滚动 滚动 滚动 滚动</p>
	<input type="button" onclick="scrollWindow1()" value="To" />
	<input type="button" onclick="scrollWindow2()" value="By" />
	<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>
</body>
</html>