英文：Evil Martians 翻译：中成翻译/sea_ljf
本文将揭开一些（网站）滚动效果的神秘面纱，这些效果非常迷人，但您不知道如何实现它们。我们将根据最新的技术和规范向您介绍最新的 JavaScript 和 CSS 功能，这些功能将使您的页面滚动更流畅、更美观、性能更高（当您将其付诸实践时）。
大多数网页无法将所有内容都放在一屏中，因此滚动对于用户来说至关重要。对于前端工程师和 UX 设计师来说，在满足设计要求的同时提供跨浏览器的良好滚动体验是一项挑战。尽管 Web 标准的发展速度比以前快得多，但代码实现往往落后。下面将介绍一些有关滚动的常见案例。检查你使用的解决方案是否已被更优雅的解决方案所取代。
消失的滚动条
在过去的三十年里，滚动条的外观一直在随着设计潮流而变化，设计师们尝试了各种颜色、阴影、上下箭头的形状以及边框的圆角。以下是它在 Windows 上的变化：
（Windows 上的滚动条）
2011年，苹果设计师从iOS中汲取灵感，为如何定义“美观”的滚动条定下了方向。滚动条全部从Mac电脑上消失，不再占据任何页面空间，只有用户触发滚动时才会重新出现（部分用户会设置滚动条不隐藏）。
（Mac 上的滚动条）
滚动条的悄然消失并未引起果粉们的不满，习惯了 iPhone 和 iPad 滚动方式的用户也很快习惯了这种设计。大部分开发者和设计师都认为这是“好消息”，因为计算滚动条的宽度是一件很麻烦的事。
然而，我们生活在一个拥有众多操作系统和浏览器的世界，它们都有不同的实现方式。如果你和我们一样是一名网页开发者，你就不能忽视“滚动条问题”。
这里有一些技巧可以让您的用户获得更好的滚动体验。
隐藏但可滚动
让我们看一个模态框的经典示例。打开时，主页应该停止滚动。在 CSS 中有一个快捷方式可以实现此目的：
身体{
溢出：隐藏；
但是上述代码会带来一些不良的副作用：
（请留意红色剪刀）
在此示例中，出于演示目的，我们将滚动条设置为强制出现在 Mac 系统上，以便用户体验与 Windows 用户的体验类似。
那我们该如何解决这个问题呢？如果我们知道滚动条的宽度，那么我们可以在每次模态框出现的时候，在主页面的右侧设置一点边距。
由于不同的操作系统和浏览器滚动条宽度不同，所以获取它的宽度并不容易。在 Mac 上，无论哪个浏览器（滚动条）统一都是 15px，但 Windows 却可以让开发者抓狂：
（“百花齐放”的宽度）
注意，以上只是基于 Windows 下最新浏览器的结果，之前的版本可能有所不同，而且谁也不知道将来滚动条宽度会如何变化。
不用去猜测（滚动条的宽度），你可以通过 JavaScript 来计算它的宽度（译者注：下面的代码只能测出原始宽度，通过 CSS 改变滚动条宽度后，下面的代码无法测出实际的宽度）：
constouter = document.createElement('div');
constinner = document.createElement（'div'）；
outer.style.overflow='滚动';
文档.body.appendChild（外部）；
外部.appendChild（内部）；
滚动条宽度=外部偏移宽度-内部偏移宽度；
文档.body.移除子元素（外部）；
尽管只有七行代码（用于测量滚动条宽度），但其中几行都在操作 DOM。（出于性能原因）在没有必要的情况下会避免 DOM 操作。
解决这个问题的另一种方法是在模态框出现时保留滚动条，下面是基于这个思想的纯CSS实现：
html{
溢出-y：滚动；
虽然解决了“模态框晃动”的问题，但是无功能的滚动条却影响了整体美观，无疑是设计上的一个败笔。
我们认为，更好的解决方案是完全隐藏滚动条。这可以仅使用 CSS 来实现。此方法与 macOS 并不完全相同，因为滚动时滚动条不可见。滚动条始终不可见，但页面可以滚动。对于 Chrome、Safari 和 Opera，请使用以下 CSS：
.container::-webkit-滚动条{
显示：无；
对于 IE 或 Edge，您可以使用以下代码：
。容器{
-ms-溢出样式：无；
至于 Firefox，不幸的是，没有办法隐藏滚动条。
正如你所见，没有灵丹妙药。每个解决方案都有其优点和缺点，你应该根据项目需求选择最合适的解决方案。
外观争议
必须承认，滚动条在某些操作系统上的外观并不好看。有些设计师喜欢完全控制自己（设计）应用程序的风格，不放过任何细节。GitHub 上有数百个库使用 JavaScript 替换系统滚动条的默认实现，以实现定制效果。
但是如果你想为现有的浏览器定制滚动条怎么办？（不幸的是）没有通用的API，每个浏览器都有自己独特的代码实现。
虽然IE5.5以后的浏览器允许修改滚动条样式，但是只允许修改滚动条颜色，下面是重绘拖动部分和箭头代码：
身体{
滚动条面颜色：蓝色；
但仅仅改变颜色对于提升用户体验帮助并不大，基于此，WebKit 开发者在 2009 年提出了解决方案（修改滚动条）样式，下面是在支持相关样式的浏览器中使用 -webkit 前缀模拟 macOS 滚动条样式的代码：
::-webkit-滚动条{
宽度：8px；
::-webkit-滚动条-拇指{
背景颜色：#c1c1c1；
边框半径：4px；
Chrome、Safari、Opera，甚至 UC 浏览器或三星自己的桌面浏览器都支持它。Edge 也有计划实现它。但三年过去了，该计划仍处于中等优先级（尚未实施）。
当我们谈论滚动条定制时，Mozilla 基金会基本忽略了设计师（开发者）的需求。17 年前就有人提出过修改滚动条样式的请求。而就在几个月前，Jeff Griffiths（Firefox 浏览器总监）终于回答了这个问题：
“除非团队中有人对此感兴趣，否则我根本不在乎。”
公平地说，站在 W3C 的角度，虽然 WebKit 的实现得到了广泛的支持，但它仍然不是一个标准。现有的修改滚动条样式的草案是基于 IE 的：只能修改其颜色。
随着支持像 WebKit 一样修改滚动条样式的 issue 的提交，争议还在继续。如果你想影响 CSS 工作组，是时候参与进来了。也许这不是优先级最高的 issue，但标准化之后（像 WebKit 一样修改滚动条样式），将让很多前端工程师和设计师的工作轻松很多。
流畅的操作体验
滚动最常见的任务是登录页面的导航（跳转）。通常，它是通过锚链接完成的。您只需要知道元素的 id：
部分
点击链接会跳转到区块（对应锚点），（然而）UX 设计师一般坚持这个过程应该是平滑的。GitHub 上有很多造轮子（帮你解决这个问题），但都或多或少用到了 JavaScript。（其实）只需要一行代码就能实现同样的效果。最近，DOM API 中的 Element.scrollIntoView() 可以通过传入一个配置对象来实现平滑滚动：
elem.scrollIntoView({
行为：'平滑'
});
但是此属性兼容性较差，并且仍然使用脚本。如果可能，请尽量少使用附加脚本。
幸运的是，有一个全新的 CSS 属性（仍处于工作草案中），可以用简单的一行代码改变整个页面的滚动行为。
html{
滚动行为：平滑；
结果如下：
（从一个块跳转到另一个块）
（流畅滚动）
您可以在 codepen 上尝试使用此属性。在撰写本文时，scroll-behavior 仅在 Chrome、Firefox 和 Opera 中受支持，但我们希望它能得到广泛支持，因为使用 CSS（而不是 JavaScript）解决页面滚动问题更加优雅，并且符合“渐进增强”模型。
粘性 CSS
另一个常见的要求是根据滚动方向动态锚定元素，即著名的“粘性”效果。
（粘性元素）
过去，要制作“粘性”元素，需要编写复杂的滚动处理程序来计算元素的大小。该函数难以处理元素“粘性”和“不粘性”之间的轻微延迟，这通常会导致抖动。通过 JavaScript 实现（粘性元素）也存在性能问题，尤其是在调用 [Element.getBoundingClientRect()] 时。
前不久，CSS实现了position:sticky属性，我们只需要指定一个偏移量（在某个方向上）就可以达到我们想要的效果。
。元素{
位置：粘性；
顶部：50px；
剩下的就交给浏览器来实现吧。你可以在 codepen 上尝试一下。在撰写本文时，position: sticky 在所有浏览器（包括移动浏览器）中都得到了很好的支持，因此如果你仍在使用 JavaScript 来解决这个问题，那么是时候切换到纯 CSS 了。
综合使用函数节流
从浏览器的角度来看，滚动是一个事件，因此在 JavaScript 中使用标准化的事件监听器 addEventListener 来处理它：
window.addEventListener('滚动',()=>{
窗口滚动顶部=窗口滚动Y；
/* 使用 scrollTop 做一些事情 */
});
用户倾向于以较高的频率滚动（页面），但如果滚动事件触发过于频繁，则会引起性能问题。 您可以使用函数节流技术进行优化。
window.addEventListener（'滚动'，油门（（）=>{
窗口滚动顶部=窗口滚动Y；
/* 使用 scrollTop 做一些事情 */
}））；
需要定义一个节流函数来包装原有的事件监听函数，减少包装函数的执行次数，只允许在固定的时间间隔内执行一次：
函数节流阀（动作，等待=1000）{
让时间 = Date.now()；
返回函数（）{
如果（（时间+等待日期.now（））{
行动（）;
是否正在运行=false；
});
当然你也可以用现有的开源轮子来实现，比如Lodash，你可以访问codepen查看上述方案和Lodash中_.throttle的区别。
使用哪一个并不重要，重要的是在必要时优化滚动处理功能。
在窗口中显示
当你需要实现图片的延迟加载或者无限滚动时，你需要判断元素是否出现在窗口中。这可以在事件监听器中处理。最常见的解决方案是使用 element.getBoundingClientRect()：
window.addEventListener('滚动',()=>{
constrect=elem.getBoundingClientRect();
const inViewport = rect.bottom>0&&rect.right>0&&
矩形左
