一、一些题外话
入坑前端半年多，可以说我就是看着各路大神的技术博客逐渐成长的，也考虑过自己写一些东西，于人多少能提供一些参考，于己可以加深对一些知识点的理解，但一直没想清楚从哪里入手，怕我的文章最后沦为别人文字的“集锦”，体现不出自己的思考。
直到前两天看到苹果公司WWDC大会2017发布产品的网页内容更新，发现里面不少交互是我们日常浏览的网站中较少见的，在接下来的一系列文章里，我准备独立实现这些交互，并把我的思考过程写出来，每周保证至少一篇的更新，不管质量怎么样反正是不愁没有内容可写了（手动捂脸表情），喜大普奔。
二、撸袖子开工
从哪里开搞呢？听天由命吧！打开Apple官网，一愣神的功夫刚好滚动到MacOS最新发布的版本图片链接，点开往下翻，哎呦不错这个屌：
滚动一卡一卡的，也看不出个所以然来，反正是这么回事：
- 首先，页面左栏有三张图片，右栏有四张图片，图片大小一致，所以右栏会高些（最开始左右两栏上边是对齐的）；
- 下拉滚动条，右栏看起来滚动得会快些，左右两栏产生错位；
- 最后到达某一位置，左右两栏下边对齐，继续下拉滚动条，左右两栏相对位置保持不变：
按照起始状态（status1）先把基本布局写好（没做响应式，这不是重点）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./index.css">
<title>scroll</title>
</head>
<body>
<div class="others">
<h1>向下滚动</h1>
</div>
<div>
<div id="column-left">
<img src="./img/me.jpeg"
alt="">
<img src="./img/me.jpeg"
alt="">
<img src="./img/me.jpeg"
alt="">
</div>
<div id="column-right">
<img src="./img/me.jpeg"
alt="">
<img src="./img/me.jpeg"
alt="">
<img src="./img/me.jpeg"
alt="">
<img src="./img/me.jpeg"
alt="">
</div>
</div>
<div class="others">
<h1>向上滚动</h1>
</div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
body > div {
display: flex;
justify-content: center;
}
img {
width: 275px;
height: 350px;
margin-bottom: 20px;
}
img:first-child {
margin-top: 20px;
}
.others {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 1200px;
background: red;
}
#column-left, #column-right {
width: 36%;
background: #ccc;
margin: 0 8px;
display: flex;
flex-direction: column;
align-items: center;
}
#column-left {
position: relative;
height: 1130px;
}
#column-right {
height: 1500px;
}
三、JS控制偏移
显然，如果不做任何处理，左右两栏滚动速度肯定是一样的，为了在滚动过程中产生错位效果，我们可以强行给其中一栏添加一个竖向偏移量x，要想知道x是多少，我们需要先了解变化率这一概念。
一个变化过程可以分为起始状态，过程状态，和最终状态，那么：
整个过程的变化量=最终值-起始值；
某一时刻的变化量=过程值-起始值；
该时刻的变化率=该时刻的变化量/整个过程的变化量；
对于线性变化来说，同步变化的不同指标在同一时刻的变化率应该是一样的，这样就可以建立等量关系了。
image.png
那么在当前问题中应该选取那两个指标呢？
一是左栏相对于右栏的位移：在图2所示时刻的变化率为x/(r_h-l_h)；
二是右栏相对于屏幕上边缘（上方虚线）的位移：在图2所示时刻的变化率为(s_t-h)/(r_h-t_h)；
于是可以得到方程x/(r_h-l_h)=(s_t-h)/(r_h-t_h)，x=(r_h-l_h)(s_t-h)/(r_h-t_h)，这样就可以通过一个函数给左栏添加竖向偏移量：
const leftColumn = document.querySelector("#column-left");
const rightColumn = document.querySelector("#column-right");
const getTop = function (self, ref, topHeight, target) { //topHeight对应h，target对应t_h
const selfHeight = self.offsetHeight; //对应l_h
const refHeight = ref.offsetHeight; //对应r_h
let scrollTop = document.body.scrollTop; //对应s_t
self.style.top = Math.ceil((refHeight - selfHeight) * (scrollTop - topHeight) / (refHeight - target)) + "px"；
};
这时候还要注意变化开始和结束的条件，这与滚动条的位置有关：
if (scrollTop <= topHeight) { //变化未开始，左右两栏上边对齐
self.style.top = 0;
}
else if (scrollTop >= topHeight + refHeight - target) {
self.style.top = refHeight - selfHeight + "px"; //变化已结束，左右两栏下边对齐
}
else {
self.style.top = Math.ceil((refHeight - selfHeight) * (scrollTop - topHeight) / (refHeight - target)) + "px"; //变化进行中，通过竖向偏移量调节左栏的位置
}
最后函数需要通过scroll事件触发：
window.onscroll = function () {
getTop(leftColumn, rightColumn, 900, 200);
};
是的，这样就可以实现预期效果了，但是这个函数至少还有两个问题：一是每次scroll事件触发，getTop函数都需要重新获取一次左栏和右栏的高度，可以把self和ref等参数拿到外面来，避免在scroll事件函数内部获取元素高度：
const leftColumn = document.querySelector("#column-left");
const rightColumn = document.querySelector("#column-right");
const scroll = function (self, ref, topHeight, target) {
const selfHeight = self.offsetHeight;
const refHeight = ref.offsetHeight;
window.onscroll = function () {
let scrollTop = document.body.scrollTop;
if (scrollTop <= topHeight) {
self.style.top = 0;
}
else if (scrollTop >= topHeight + refHeight - target) {
self.style.top = refHeight - selfHeight + "px";
}
else {
self.style.top = Math.ceil((refHeight - selfHeight) * (scrollTop - topHeight) / (refHeight - target)) + "px";
}
};
};
scroll(leftColumn, rightColumn, 900, 200);
第二个问题是变化开始之前和结束之后其实不再需要执行scroll事件函数内部代码了，至少可以少执行一部分代码。我的想法是设定一个范围区间，当scrollTop值在这个区间内时，才执行已有代码。
王丶可乐同学提出可以用element.scrollTop方法自动获取主体结构前面页面的高度，像之前那样自己定义一个高度确实有点随便。这样的话我们可以把scroll函数的第三个参数的意义改为距屏幕上边缘多远（topTarget）时变化开始，其实也不需要多少改动，之前的topHeight参数就相当于主体结构前面页面的高度减去topTarget（因为变化提前开始了），在函数内部还是可以用的。同时别忘了右栏相对于屏幕上边缘的位移的总变化量也相应增加了topTarge，于是我们得到了最新版的scroll函数(为了和topTarget对应，我们把之前的target参数重命名为bottomTarget)：
const leftColumn = document.querySelector("#column-left");
const rightColumn = document.querySelector("#column-right");
const scroll = function (self, ref, topTarget, bottomTarget) {
const selfHeight = self.offsetHeight;
const refHeight = ref.offsetHeight;
const topHeight = ref.offsetTop - topTarget;
window.onscroll = function () {
const scrollTop = document.body.scrollTop;
if (scrollTop > topHeight - 8 || scrollTop < topHeight + refHeight - bottomTarget + 8) {
if (scrollTop <= topHeight) {
self.style.top = 0;
}
else if (scrollTop >= topHeight + refHeight - bottomTarget+topTarget) {
self.style.top = refHeight - selfHeight + "px";
}
else {
self.style.top = Math.ceil((refHeight - selfHeight) * (scrollTop - topHeight) / (refHeight - bottomTarget + topTarget)) + "px";
}
}
};
};
scroll(leftColumn, rightColumn, 0, 0);
四、结语和彩蛋
当我们不得不使用两列布局，而图片只有奇数个，没有办法水平向一一对应时，这类布局就可以派上用场。如果只是单纯地想用，效果其实也是不错的。
对于我上面给出的代码，这肯定不是最佳实践，希望同学们用批判的眼光去阅读，积极提出意见和建议，共同在前端这条不归路上越走越远。另外，有没有人好奇过HTML里的me.jpeg到底是啥？我是彩蛋
网友评论