浏览器滚动的详细解释 & Vue 固定滚动位置的实现

滚动形成的条件

1. 父子两个元素

2. 子元素的高 > 父元素的高, 并且父元素 overflow:scroll;

ok, 那么现在考虑这种情况:
假设:

1. 有父子两个元素, 子元素的高度 > 父元素的高度;

2. 父元素没有设置 overflow 属性.

3. 子元素的高度 > 浏览器高度

在这种情景下, 子元素会把 body 撑开, 也就是 子元素的高度, 就是body 的高度.
此时, 你滚动页面的时候, 是在滚动谁?
body 还是 子元素?
是: body

ok, 那么如果父元素设置了 overflow: scroll 呢?
此时你滚动的, 就是子元素.

这里先定义两个名词:
滚动元素: 就是滚来滚去的那个元素
滚动容器: 就是滚动元素的父元素

ok, 根据滚动元素的不同, 我们可以把滚动分成两种类型:

• 文档级别的滚动

• 元素级别的滚动

文档级别的滚动, 滚动元素固定为 document.body, 滚动容器, 就是文档的根元素
而元素级别的滚动, 滚动元素就是一个普通的元素.

说这个干嘛?
因为和滚动事件是有关系的

滚动事件

元素滚动会触发滚动事件, 这里要谨记一点: 滚动事件始终在滚动容器上面监听.
对于文档级别的滚动, 滚动事件会始终在 document 和 window 上面触发.
这也就意味着, 如果你平时写的是:

window.onscroll = xxx, 那么说明你滚动的元素是 body.

但是元素级别的滚动就不会在 document & window 上面触发滚动事件.

和滚动相关的一些属性

和滚动相关的属性, 都是滚动容器的.

1 scrollTop/Left 值
记录当前已经滚动的距离

2 scrollHeight
当前的被滚动元素的高度, 也就是子元素的高度

3 最大滚动高度 = scrollHeight - 当前的滚动容器的高度

两个备注:

1. 文档级别的滚动的时候, 你可以试试打印一下 document.body.scrollTop 的值, 发现是存在的
   但是按照: '所有的滚动相关的属性都属于滚动容器', document.body 是滚动元素, 它不应该

有这个 document.body.scrollTop 的值的, 这个是一个奇怪的点.

1. window 对象上面的一些和滚动相关的属性

scrollTo(x,y) 滚动到指定的位置
scrollBy(x,y) 将滚动条滚动 指定的距离,而不是滚动到指定的位置.这个要注意
scrollX/Y 因为如果绑定在 window 对象上面的 scroll 事件,scrollTop 属性是用不了的

再说我们的选择

我们平时在开发的过程中, 是用文档级别的滚动还是元素级别的滚动呢?
建议用元素级别的滚动, 因为这意味着我们可以控制更多, 好吧, 我编不出来了.
我个人觉得使用元素级别的滚动比较好, 也就是你自己设置一个元素的高度等于浏览器的高度
因为这样做一些效果, 比如说底部固定一个bar的时候, 就挺方便.

那么如何实现元素级别的滚动呢?

首先你要有一个元素, 元素的高度是浏览器的高度 > 那么如何让元素的高度是浏览器的高度?

这样:
假设页面长这样:

    html
        body
            .container

你可以先给 .container 设置高度为 100%;

.container {
    height: 100%;
}

当然没效果, 因为 100%, 相对于父元素的高度, 父元素没设置高度
所以这样:

body {
    height: 100%;
}

body 的父元素是 html

html {
    height: 100%;
}

日了狗了, html 自己就是根元素, 没父元素了:
浏览器在这里设置了一个规则:

html 如果设置了 height: 100%, 那么高度就是浏览器的高度.

那么再回溯回来, 我们这样弄就行了:

html, body {
    height: 100%;
}
.container {
    height: 100%;
}

然后考虑滚动形成的两个条件, 对于滚动容器还要设置一下: overflow:scroll;
所以最终长的样子就这样:

html, body {
    height: 100%;
}
.container {
    height: 100%;
    overflow:scroll;
}

具体的代码实现

wc-directive