前端实战(一)：锚点跳转与滚动条监听

目录

开发环境

实现效果

技术要点及代码

一、querySelectorAll() 方法

二、scrollIntoView()方法

实战核心代码

---

开发环境

在HBuilder X开发工具下通过CDN的方式引入vue2.0以及Element-UI

<!--引入vue2.0-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<!--引入elementui-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

实现效果

技术要点及代码

一、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 类似。

实战核心代码

<div id="app">
	<el-dialog title="作文集" :visible.sync="dialogVisible" width="50%" class="spec-dialog"  :close-on-click-modal="false" @close="closeDialog()">
		<el-row>
			<el-col :span="4" style="height:150px">
				<el-steps direction="vertical" :active="active" finish-status="success">
					<el-step title="作文一" @click.native="goRule('zwy')"></el-step>
					<el-step title="作文二" @click.native="goRule('zwe')"></el-step>
					<el-step title="作文三" @click.native="goRule('zws')"></el-step>
				</el-steps>
			</el-col>
			<el-col :span="20">
				  <div class="scoll_box" @scroll="onScroll" id="scrollElement" ref="myScroll">
						<span id="zwy" class="scroll-item">作文一</span>
						<el-divider></el-divider>
						<div class="scroll_content">
							内容1
						</div>
						<span id="zwe" class="scroll-item">作文二</span>
						<el-divider></el-divider>
						<div class="scroll_content">
			                内容2
						</div>
						<span id="zws" class="scroll-item">作文三</span>
						<el-divider></el-divider>
						<div class="scroll_content">
							内容3
						</div>
				</div>
			</el-col>
		</el-row>
	</el-dialog>
</div>

<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				dialogVisible: true,
				active: 0
			},
			methods: {
				//锚点跳转
				goRule(event) {
					var id = "#" + event;
					document.querySelector(id).scrollIntoView({
						behavior: "smooth",
						block: "start",
						inline: "nearest",
					});
					if (this.active++ > 2) this.active = 0;
				},
				//监听滚动条
				onScroll(e) {
					let scrollItems = document.querySelectorAll(".scroll_content");
					for (let i = scrollItems.length - 1; i >= 0; i--) {
						// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
						let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop;
						//监听滚动条是否到底部
						const dom = document.getElementById('scrollElement');
						let scrollHeight = dom.clientHeight + dom.scrollTop >= dom.scrollHeight;
						if (judge) {
							this.active = i;
							if (scrollHeight) {
								//到达底部，步骤条完成
								this.active = i + 1;
								break;
							}
							break;
						}
					}
				},
				//关闭弹窗，重置元素
				closeDialog() {
					this.active = 0;
					this.$refs.myScroll.scrollTop = 0;
				}
			}
		})
	</script>

<style>
         /**
		 * el-divider 虚线
		 */
		.el-divider--horizontal {
			margin: 8px 0;
			background: 0 0;
			border-top: 1px dashed #e8eaec;
		}

		/**
		 * 滚动条start
         * 不使用el-dialog的滚动条，通过overflow: hidden和overflow-y: scroll 让指定元素产生滚动条
		 */
		.el-dialog__wrapper {
			overflow: hidden;
		}
		.scoll_box {
			height: 380px;
			overflow: hidden;
			overflow-y: scroll;
			font-size: 15px;
		}
        
		/**
		 * 滚动条end
		 */

		.scoll_box>div {
			margin-bottom: 10px;
		}

		.scoll_box>span {
			font-size: 20px;
		}

		.scroll-item {
			font-weight: bold;
			font-size: 25px;
		}
	</style>