网页常见的返回顶部，这个平滑滚动效果有三种实现方式：
- 给 html 加 CSS 属性，behavior
- 滚动 DOM scrollIntoView() 方法
- 滚动坐标 scrollTo（或者是 scroll）方法
用法去参考以下两个博客内容和 MDN：
CSS scroll-behavior 和JS scrollIntoView 让页面滚动平滑
还算有点用的 scrollTo 和 scrollBy 两个JS API
滚动又一个常用的共同参数：
behavior 表示滚动行为，支持参数：smooth (平滑滚动有过渡效果)，instant (瞬间滚动无过度效果)，默认值 auto，效果等同于 instant。
一、scrollTo 和 scrollBy 的区别
crollTo 和 scrollBy 的区别
看图说话💬：scrollTo() 表示滚到到指定的位置，而 scrollBy() 表示相对当前的位置滚动多少距离。其中 scrollTo 和 scroll 的用法和效果是一样的。
非标准的相对滚动方法（目前仅Firefox浏览器支持），分别为行滚动（Window.scrollByLines()
行为表现接近于上下键控制滚动）和页滚动（Window.scrollByPages()行为表现接近于空格键（反向+Shift）控制滚动。）两者都是属于 window 的方法，不支持具体的 DOM。
演示代码为，请在 Firefox 浏览器下尝试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollTo 和 scrollBy 的区别</title>
<style>
*{margin:0;padding:0;}
header{
margin: 20px auto;
height: 50px;
width: 500px;
}
button{
width: 93px;
height: 30px;
border-radius: 5px;
outline: none;
/* border-style: solid; */
}
section{
margin: 10px auto;
height: 500px;
width: 500px;
overflow: auto;
background-color: rgb(48, 173, 173);
}
main{
margin:auto;
width: 80%;
background-color: #ffe277;
}
span{
margin: 10px;
}
</style>
</head>
<body>
<header>
<button>scrollTo</button>
<button>scrollBy</button>
<button>scroll</button>
<button>内容超过屏幕</button>
<button>scrollByLines</button>
<button>scrollByPages</button>
</header>
<section>
<main>
<span>
谁是我们的敌人？谁是我们的朋友？这个问题是革命的首要问题。中国过去一切革命斗争成效甚少，其基本原因就是因为不能团结真正的朋友，以攻击真正的敌人。革命党是群众的向导，在革命中未有革命党领错了路而革命不失败的。我们的革命要有不领错路和一定成功的把握，不可不注意团结我们真正的朋友，以攻击真正的敌人。我们要分辨真正的敌友，不可不将中国社会各阶级的经济地位及其对于革命的态度，作一个大概的分析。
中国社会各阶级的情况是怎么样的呢？
地主阶级和买办阶级。在经济落后的半殖民地的中国，地主阶级和买办阶级完全是国际资产的附庸，其生存和发展，是附属于帝国主义的。这些阶级代表中国最落后的和最反动的生产关系，阻碍中国生产力的发展。他们和中国革命的目的完全不相容。特别是大地主阶级和大买办阶级，他们始终站在帝国主义一边，是极端的反革命派。其政治代表是国家主义派和国民党右派。
中产阶级。这个阶级代表中国城乡资本主义的生产关系。中产阶级主要是指民族资产阶级，他们对于中国革命具有矛盾态度：他们在受外资打击、军阀压迫感觉痛苦时，需要革命，赞成反帝国主义反军阀的革命运动；但是当着革命在国内有本国无产阶级的勇猛参加，在国外有国际无产阶级的积极援助，对于其欲达到大资产阶级地位的阶级的发展感到威胁时，他们又怀疑革命。他们反对以阶级斗争学说解释国民党的民生主义，他们反对国民党联俄和容纳共产党及其左派分子。但这个阶级的企图——实现民族资产阶级统治的国家，是完全行不通的，因为现在世界上的局面，是革命和反革命两大势力作最后斗争的局面。这两大势力竖起了两面大旗：一面是红色的革命大旗，第三国际高举着，号召全世界一切被压迫阶级集合于其旗帜之下；一面是白色的反革命的大旗，国际联盟高举着，号召全世界一切反革命分子集合于其旗帜之下。那些中间阶级，必定很快地分化，或者向左跑入革命派，或者向右跑入反革命派，没有他们“独立“的余地。所以，中国的中产阶级，以其本阶级为主体的“独立”革命思想，仅仅是一个幻想。
小资产阶级。如自耕农，手工业主，小知识阶层——学生界、中小学教员、小员司、小事务员、小律师、小商人等都属于这一类。这一个阶级，在人数上，在阶级性上，都值得大大注意。自耕农和手工业主所经营的，都是小生产的经济。这个小资产阶级的各阶层虽然同处在小资产阶级经济地位，但有三个不同的部分。第一部分是有余钱剩米的，即用其体力和脑力劳动所得，除自给外，每年有余剩。这种人发财观念极重，对赵公元帅礼拜最勤，虽不妄想发大财，却总想爬上中产阶级地位。他们看见那些受人尊敬的小财东，往往垂着一尺长的涎水。这种人胆子小，他们怕官，也有点怕革命。因为他们的经济地位和中产阶级颇接近，故对于中产阶级的宣传颇相信，对于革命取怀疑的态度。这一部分人在小资产阶级中占少数，是小资产阶级的右翼。第二部分是在经济上大体上可以自给的。这一部分人比较第一部分人大不相同，他们也想发财，但是赵公元帅总不让他们发财，而且因为近年以来帝国主义、军阀、封建地主、买办大资产阶级的压迫和剥削，他们感觉现在的世界已经不是从前的世界。他们觉得现在如果只使用和从前相等的劳动，就会不能维持生活。必须增加劳动时间，每天起早散晚，对于职业加倍注意，方能维持生活。他们有点骂人了，骂洋人叫“洋鬼子”，骂军阀叫“抢钱司令”，骂土豪劣绅叫“为富不仁”。对于反帝国主义反军阀的运动，仅怀疑其未必成功（理由是：洋人和军阀来头那么大），不肯贸然参加，取了中立的态度，但是绝不反对革命。这一部分人数甚多，大概占了小资产阶级的一半。第三部分是生活下降的。这一部分人好些大概原先是所谓殷实人家，渐渐变得仅仅可以保住，渐渐变得生活下降了。他们每逢年终结账一次，就吃一惊，说：“咳，又亏了！”这种人因为他们过去过着好日子，后来逐年下降，负债渐多，渐次过着凄凉的日子，“瞻念前途，不寒而栗”。这种人在精神上感觉的痛苦很大，因为他们有一个从前和现在相反的比较。这种人在革命运动中颇为要紧，是一个数量不小的群众，是小资产阶级的左翼。以上所说小资产阶级的三部分，对于革命的态度，在平时各不相同；但到战时，即革命潮流高涨、可以看见胜利的曙光时，不但小资产阶级的左派参加革命，中派亦可参加革命，即右派分子受了无产阶级和小资产阶级左派的革命大潮所裹挟，也只得附和着革命。我们从一九二五年的五卅运动和各地农民运动的经验看来，这个断定是不错的。
</span>
</main>
</section>
<script>
const btn = document.querySelectorAll("button");
const scrollMain = document.querySelector("section");
const scrollTo = btn[0];
const scrollBy = btn[1];
const scroll = btn[2];
const fixheight = btn[3];
const scrollByLines = btn[4];
const scrollByPages = btn[5];
scrollTo.onclick = function(){
scrollMain.scroll({
left: 0,
top: 20,
behavior: "smooth"
});
};
scrollBy.onclick = function(){
scrollMain.scrollBy({
left: 0,
top: 20,
behavior: "smooth"
});
};
scroll.onclick = function(){
scrollMain.scroll({
left: 0,
top: 20,
behavior: "smooth"
});
};
fixheight.onclick = function(){
scrollMain.style.height = "auto";
}
scrollByLines.onclick = function(){
window.scrollByLines(1);
};
scrollByPages.onclick = function(){
window.scrollByPages(1);
};
</script>
</body>
</html>
二、元素尺寸和鼠标位置 mouseEvent
2.1 窗口下的滚动（window）：
window.pageXOffset 属性是 window.scrollX 属性的别名（设置窗体左滚动距离 pageXOffset）；window.pageYOffset 属性是 window.scrollY 属性的别名（设置窗体右滚动距离 pageYOffset）。其中 pageXOffset 的兼容性比 scrollX 好。
重点：这四个属性都是只读的。
窗口下的滚动
示例源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollTo 和 scrollBy 的区别</title>
<style>
*{margin:0;padding:0;}
header{
margin: 20px auto;
height: 50px;
width: 500px;
}
button{
width: 93px;
height: 30px;
border-radius: 5px;
outline: none;
/* border-style: solid; */
}
section{
margin: 80px;
height: 5000px;
width: 5000px;
overflow: auto;
background-color: rgb(48, 173, 173);
}
</style>
</head>
<body>
<header>
<button>计算🧮</button>
</header>
<section>
<h3></h3>
<h3></h3>
</section>
<script>
const btn = document.querySelector("button");
const headTitle = document.querySelectorAll("h3");
btn.onclick = function(){
window.scrollTo(20,10);
const pageXOffset = window.pageXOffset;
const pageYOffset = window.pageYOffset;
const scrollX = window.scrollX;
const scrollY = window.scrollY;
headTitle[0].textContent = `pageXOffset:${pageXOffset}pageYOffset:${pageYOffset}`;
headTitle[1].textContent = `scrollX:${scrollX}scrollY:${scrollY}`;
};
</script>
</body>
</html>
2.2 元素级别的滚动
- 设置 element 左滚动距离100
element.scrollLeft = 100; - 设置element上滚动距离100
element.scrollTop = 100; - 可滚动高度和可滚动宽度：
element.scrollHeight、element.scrollWidth
以下演示只演示竖直方向上的，横向同理：
scrollHeight 滚动高度的计算方法是，父盒子高度加上超出父盒子的高度为滚动高度，一般不动态改变是固定值。
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素级别的滚动</title>
<style>
*{margin:0;padding:0;}
header{
margin: 20px auto;
height: 50px;
width: 500px;
}
button{
width: 93px;
height: 30px;
border-radius: 5px;
outline: none;
/* border-style: solid; */
}
section{
margin: 10px auto;
height: 500px;
width: 500px;
overflow: auto;
background-color: rgb(48, 173, 173);
}
main{
margin:auto;
width: 80%;
height: 200%;
background-color: #ffe277;
}
div{
margin: 100px;
}
</style>
</head>
<body>
<header>
<button>scrollTop</button>
<button>计算scrollheight</button>
</header>
<section>
<main>
<div>你好</div>
</main>
</section>
<script>
const btn = document.querySelectorAll("button");
const scrollMain = document.querySelector("section");
const scrollTop = btn[0];
const scrollheight = btn[1];
scrollTop.onclick = function(){
scrollMain.scrollTop = 100;
};
scrollheight.onclick = function(){
alert(scrollMain.scrollHeight);
};
</script>
</body>
</html>
2.3 scroll、scrollBy、scrollTo
既能作用于 element 和 window，使用参考上面。
2.4 鼠标🖱️滚动对象 MouseEvent 常用的尺寸
这个不用动图看图就行了：
MouseEvent.clientX 和 MouseEvent.clientY
MouseEvent.screenX 和 MouseEvent.screenY
MouseEvent.pageX 和 MouseEvent.pageY
MouseEvent.offsetX 和 MouseEvent.offsetY
MouseEvent.x 是 MouseEvent.clientX 属性的别名，MouseEvent.Y 是 MouseEvent.clientY 属性的别名。
演示源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
*{margin:0;padding:0;}
section{
margin-top: 30px;
height: 300px;
width: 5000px;
overflow: auto;
background-color: rgb(48, 173, 173);
}
div{
width: 200px;
height: 200px;
margin-left: 200px;
margin-top: 50px;
cursor: pointer;
background-color: #ffe277;
border-radius: 5px;
padding: 2px;
}
</style>
</head>
<body>
<section>
<div>
<h3>offsetX: <span></span></h3>
<h3>offsetY: <span></span></h3>
<h3>clientX: <span></span></h3>
<h3>pageX: <span></span></h3>
<h3>screenX: <span></span></h3>
</div>
</section>
<script>
const btn = document.querySelectorAll("button");
const scrollMain = document.querySelector("section");
const span = document.querySelectorAll("span");
const odiv = document.querySelector("div");
const offsetX = span[0];
const offsetY = span[1];
const clientX = span[2];
const pageX = span[3];
const screenX = span[4];
const scrollTop = btn[0];
const scrollheight = btn[1];
odiv.addEventListener("mousemove",function(event){
offsetX.textContent = event.offsetX;
offsetY.textContent = event.offsetY;
clientX.textContent = event.clientX;
pageX.textContent = event.pageX;
screenX.textContent = event.screenX;
},false);
</script>
</body>
</html>
网友评论