PC 端网页特效 2-client & scroll 学习
Posted GoldenaArcher
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PC 端网页特效 2-client & scroll 学习相关的知识，希望对你有一定的参考价值。
PC 端网页特效 2-client & scroll 系列及学习案例
上一篇笔记：PC 端网页特效-offset 系列
顺便吐槽一下，标题长度都有限制了是什么情况……
元素可视区 client 系列
client，即 客户端。
可以使用 client 系列相关属性来获取元素可视区的相关信息，通过 client 系列的相关属性可以动态的获得该元素的边框大小、元素大小。
| client 系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回元素自身包括 padding, 内容区的宽度，不含边框，返回值不带单位 |
| element.clientHeight | 返回元素自身包括 padding, 内容区的高度，不含边框，返回值不带单位 |
与 offset 系列最大的区别就在于：client不带边框，offset带边框
flexible.js 相关知识点
本来用的是 flexible.js 的源码作为案例的，不过我确实找不到 flexible.js 用的版本，所以这段先暂时搁置了。
左右官方其实已经有申明：
由于
viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。对 flexible.js 还是有性趣学习的可以去他们的 github 仓库看看：amfe-flexible
这里就提了一下视频中出现的知识点。
立即执行函数
顾名思义，能够立即执行的函数。立即执行函数的执行不需要依赖于函数调用。
写法有两种：
// 方法1
(function () {
console.log("22"); // 22
})();
// 方法2
// (function () {
// console.log("33"); // 33
// }());
推荐的写法是方法 1，在使用 Prettier 作为默认格式化工具的时候，写法 2 会被自动格式化成写法 1。
本质上来说还是声明一个匿名函数，随后用小括号去执行它，传递参数的方法与调用的方式也是一样的：
(function (msg) {
console.log(msg); // 22
})("22");
注意：立即执行函数需要用 ; 分开，否则可能会出现报错。
立即执行函数的好处就在于：
- 它独立创造了一个作用域，使用
var去声明不会污染其他的作用域
触发 load 事件
以下三种情况都会触发 load 事件：
- a 标签的超链接
- f5 或者刷新，包括强制刷新
- 前进后退按钮
但是 火狐(firefox) 有个特点，会缓存数据页面、DOM 和 javascript 的状态，所以这个时候使用后退按钮就无法刷新页面。
针对这个情况，可以使用 pageshow事件 来触发事件。无论页面是否来自缓存的信息，pageshow 在页面显示时，在 load 事件加载后被触发。它可以根据对象中的 persisted 来判断是否缓存中的页面触发的 pageshow 事件。如果 e.persisted 返回的是 true,就代表着这个页面从缓存中获取的。
注：pageshow 必须添加给 window。
使用案例如下：
window.addEventListener("pageshow", function (e) {
if (e.persisted) {
setRemUnit();
}
});
对这个函数来说，即使页面是从前进/后退中获得的，也需要重新加载该事件。
元素滚动 scroll 系列
scroll 即滚动，其属性值的命名方式和 offset, client 还挺像的。
| scroll 系列属性 | 作用 |
|---|---|
| element.scrollTop | 返回元素被卷去的上测距离，返回值不带单位 |
| element.scrolltLeft | 返回元素被卷去的左测距离，返回值不带单位 |
| element.scrollWidth | 返回元素自身实际的宽度，不含边框，返回值不带单位 |
| element.scrollHeight | 返回元素自身实际的高度，不含边框，返回值不带单位 |
client 和 scroll 最大的区别在于，scroll 是内容的实际大小。
在设置 overflow: auto; 的情况下，client 会返回盒子的大小，scroll 返回的依旧是所有内容的实际数值。
三大系列总结
注：offset, client, scroll 返回值均不带有单位
| 三大系列 大小对比 | 作用 |
|---|---|
| element.offsetWidth | 返回自身包括边框、padding、内容区的宽度 |
| element.clientWidth | 返回自身包括 padding、内容区的宽度 |
| element.scrollWidth | 返回自身实际的宽度 |
主要用法：
-
offset
获取元素位置
-
client
元素大小
-
scroll
滚动距离
注：页面滚动距离通过 window.pageXOffset 和 window.pageYOffset 获得，如下面的案例。
案例
scroll 案例，仿淘宝固定右侧侧边栏
注： 还是存在兼容性问题，IE9 以上的支持性比价好
效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
header {
height: 172px;
background-color: lightcoral;
}
.banner {
height: 300px;
background-color: lightcyan;
}
.main {
height: 800px;
background-color: lightblue;
}
.container {
width: 80%;
margin: 0 auto;
margin-bottom: 10px;
}
aside {
position: absolute;
top: 300px;
right: 5%;
height: 200px;
width: 5%;
background-color: lightgreen;
}
.goBack {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<aside class="sidebar">
<div class="goBack">返回顶部</div>
</aside>
<header class="header container">头部</header>
<div class="banner container">banner</div>
<div class="main container">主体</div>
<script>
// 1. 获取元素
const sidebar = document.querySelector(".sidebar");
const banner = document.querySelector(".banner");
const goback = document.querySelector(".goBack");
// 一定要写到滚动的外面
const bannerOffset = banner.offsetTop;
const sidebarOffset = sidebar.offsetTop - bannerOffset;
// 2. 页面滚动事件
document.addEventListener("scroll", function () {
const pageYOffset = window.pageYOffset;
const sidebarPos = pageYOffset > bannerOffset ? "fixed" : "absolute";
const sidebarTop = pageYOffset > bannerOffset ? sidebarOffset : 300;
const displayGoBack = pageYOffset > bannerOffset ? "block" : "none";
sidebar.style.position = sidebarPos;
sidebar.style.top = sidebarTop + "px";
goback.style.display = displayGoBack;
});
</script>
</body>
</html>
以上是关于PC 端网页特效 2-client & scroll 学习的主要内容，如果未能解决你的问题，请参考以下文章