前端实战(一)：锚点跳转与滚动条监听
目录
开发环境
实现效果
技术要点及代码
一、querySelectorAll() 方法
二、scrollIntoView()方法
实战核心代码
开发环境
在HBuilder X开发工具下通过CDN的方式引入vue2.0以及Element-UI
实现效果
技术要点及代码
一、querySelectorAll() 方法
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回NodeList对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。你可以使用 NodeList 对象的length属性来获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。
elementList = document.querySelectorAll(selectors);- elementList 是一个静态的 NodeList 类型的对象；
- selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。
二、scrollIntoView()方法
scrollIntoView()方法将指定的元素滚动到浏览器窗口的可见区域。
实例：
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();语法：
element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数语法参数：
| alignToTop | 参数详情 |
| true | 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"} |
| false | 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"} |
| scrollIntoViewOptions | 参数详情 |
|---|---|
| behavior | 定义过渡动画。"auto","instant"或"smooth"。默认为"auto" |
| block | "start"，"center"，"end"或"nearest"。默认为"center" |
| inline | "start"，"center"，"end"或"nearest"。默认为"nearest" |
behavior表示滚动方式。auto表示使用当前元素的scroll-behavior样式。instant和smooth表示直接滚到底和使用平滑滚动。block表示块级元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说，就是竖直方向。start表示将视口的顶部和元素顶部对齐；center表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；nearest表示就近对齐。inline表示行内元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说，就是水平方向。其值与block类似。
实战核心代码
作文一 本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！