操作滚动条小结：scrollIntoView/animate等方法的来龙去脉

操作滚动条可以通过锚点跳转，JS操作滚动条，与scrollIntoView等方法。对此，我来考古一下。

锚点跳转滚动滚动条

网页中的锚点跳转是HTML早期功能之一，锚点（anchor）跳转是1991年发布的HTML标准的一部分，这是超文本链接的基本特性。

锚点跳转通过使用<a>标签的href属性来创建指向页面内部某个ID或名称（使用id或name属性标记的）的链接来实现。

代码语言：javascript复制

<!-- 目标位置 -->
<div id="section1">This is Section 1</div>
**************长内容********************
<!-- 页内跳转链接，条件跳转到 Section 1-->
<a href="#section1">Jump to Section 1</a>

即使是最早的Web浏览器，如NCSA Mosaic，也支持页面内通过锚点进行跳转！

关于浏览器历史，参看：《浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战》浏览器始祖NCSA Mosaic在1993年1月发布(于1992年末由国家超级计算机应用中心—National Center for Supercomputing Applications开发)。Mosaic可以同时展示文字和图片，从此浏览器变得有趣多了。在当时人气爆发的大受欢迎。Mosaic的出现，算是点燃了后期互联网热潮的火种之一。NCSA将Mosaic的商业运营权转售给了Spyglass公司，该公司又向包括微软公司在内的多家公司技术授权，允许其在 Mosaic的基础上开发自己的产品 1994年10月13日，网景通信公司推出发布了Mosaic Netscape 0.9 1994年开始，网景通信公司推出了代号为Netscape Navigator 1.0(网景导航者、网景浏览器)，随后迭代版本迅速占领浏览器大部分份额。Netscape自称“Mozilla/1.0(Win3.1)”，一说 Mozilla = Mosaic Killer，意为Mosaic杀手，也有说法是 Mozilla = Mosaic & Godzilla，意为马赛克和哥斯拉，而Mozilla最初的吉祥物是只绿色大蜥蜴，后来更改为红色暴龙，跟哥斯拉长得一样。 1995年起搭载cookie、框架和JavaScript等多样独自功能的2.0版上市。从前前端码农开始可以大踏步干活了，与通宵达旦干兼容血战到底。网景支持框架（frame），但是Mosaic不支持框架，于是网站管理员探测user agent，对Mozilla浏览器发送含有框架的页面，对非Mozilla浏览器发送没有框架的页面。关于JavaScript，参看：《ECMAScript进化史(1):话说Web脚本语言王者JavaScript的加冕历史》与《JS引擎(0):JavaScript引擎群雄演义—起底JavaScript引擎》 1995年Sun公司将Oak语言改名为Java，正式向市场推出（次年，LiveScript改名为JavaScript）。 Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"（Write Once, Run Anywhere），它看上去很可能成为未来的主宰。网景公司动了心，决定与Sun公司结成联盟。它不仅允许Java程序以applet（小程序）的形式，直接在浏览器中运行；甚至还考虑直接将Java作为脚本语言嵌入网页，只是因为这样会使HTML网页过于复杂，后来才不得不放弃。总之，当时的形势就是，网景公司的整个管理层，都是Java语言的信徒，Sun公司完全介入网页脚本语言的决策。 1995年4月，网景公司录用34岁Brendan Eich( JavaScript 之父闪亮登场)。 Brendan Eich被指定为这种"简化版Java语言"的设计师。但是，他对Java一点兴趣也没有。为了完成(应付)公司安排的任务，他只用10天时间就把JavaScript设计出来了。虽然语言的设计者水平非常NB，但谁也架不住“时间紧，任务重”。由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果不是公司的决策，Brendan Eich绝不可能把Java作为Javascript设计的原型。作为设计者，他都不喜欢这个作品！

1995年浏览器有JavaScript 功能，可以通过JavaScript 手动更爱hash进行跳转

代码语言：javascript复制

window.location.hash="section1"

JavaScript操作滚动条，还是不尽人意

操作滚动条滚动

1997年，JavaScript由ECMA International采纳为标准（ECMAScript），从而确保了不同浏览器之间的一致性和兼容性。

scroll和scrollTo在现代浏览器中都支持的

代码语言：javascript复制

// 使用scrollTo滚动页面到指定位置（100px, 100px）
window.scrollTo(100, 100);

// 使用scroll执行相同的操作
window.scroll(100, 100);

允许你指定滚动行为（如是否平滑滚动）：

代码语言：javascript复制

// 使用对象参数带有平滑滚动
window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

// 使用scroll实现同样的滚动效果
window.scroll({ top: 100, left: 100, behavior: 'smooth' });

但是要滚动锚点位置，需要计算滚动的位置，如果是嵌套套娃，就非常复杂——可以复习下：《再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX》

这个方法，我劝读者放弃！

scrollIntoView滚动到指定为止

2000年，DOM2规范带来了scrollIntoView API，但是微软从屠龙少年变恶龙后，就奔对新规范置之不理了！——这个API目前除了IE，可以放心用！

代码语言：javascript复制

document.getElementById("section1").scrollIntoView();
// 或者
document.querySelector("#section1").scrollIntoView(true);

更加精细化控制：

代码语言：javascript复制

element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

具体查看：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

animate大法

是否还记得jquery时代的（2006年8月发布的jquery1.0 版本就推出了animate）

代码语言：javascript复制

$("#button").click(function() {
  $("html, body").animate({
    scrollTop: $("#section1").offset().top }, {duration: 500,easing: "swing"});
    return false;
});

animate()方法使得很容易对CSS属性实施动画效果，并且随着jQuery库的普及，animate()方法也迅速成为一个广为人知的标准做法。

《css过去及未来展望—分析css演进及排版布局的考量》 1999年，CSS 3的草稿开始制定 2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 2005 年 12 月，W3C 开始 CSS3 标准的制定。css是有一系列的标准组成。每个系列完成的时间不一样。所以css3是不断的演进的，直到现在。

CSS逐步普及，但是精确控制css3的动画，还是非常麻烦。

《复杂web动画，不慌，选择 web Animations API 》，比如直播的世界消息或者弹幕：我们需要消息先运动到屏幕中间，消息最少需要在停留2秒，如果消息过长，消息还需要 匀速滚动 ，之后再滑出屏幕。

滑入
暂停，如果消息过长，消息还需要匀速滚动
滑出

难点就在于，暂停阶段，消息滚动的时间并不是确定的，需要计算。这个时候，纯CSS3的动画，难度就有些高了，采用 Web Animations API，天然的和JS亲和，那就简单多了。

2013年，W3C 提出 Web Animation API（简称 WAAPI）工作草案，但是知道如今（截止2024年1月）还是草案状态（十年磨一剑——CSS3又何尝不是如此！）。但是目前chrome基本都支持！

具体可以MDN例子：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate

这里不在赘述，但是只是为了滚动条滚动，用这个api 是大材小用哈！

转载本站文章《操作滚动条小结：scrollIntoView/animate等方法的来龙去脉》, 请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/htmlBase/2022_1223_9017.html

javascript

0 人点赞