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

Keven 发布于2019-08-20 18:11 / 1819人阅读

摘要：滚动形成的条件父子两个元素子元素的高父元素的高并且父元素那么现在考虑这种情况假设有父子两个元素子元素的高度父元素的高度父元素没有设置属性子元素的高度浏览器高度在这种情景下子元素会把撑开也就是子元素的高度就是的高度此时你滚动页面的时候是在滚动

滚动形成的条件

父子两个元素

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

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

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

父元素没有设置 overflow 属性.

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

在这种情景下, 子元素会把 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 - 当前的滚动容器的高度

两个备注:

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

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

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

GPU云服务器云服务器滚动位置滚动到原来位置滚动到指定位置滚动条位置复位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84170.html

vue实现列表固定列滚动

　　想要在移动端中实现列表固定列固定样式，可以用vue+scss以下具体内容：　　功能介绍：　　在移动端开发中，会用到列表作为信息展示方式，一般希望上下滚动时，可以固定表头，左右滚动时，可以固定最左列。　　大致需求：　　1、数组循环遍历可以让列表所有内容循环展示　　2、在上下滚动时，固定表头在最顶端显示；　　3、在左右滚动时，固定左边一列或多列可以固定显示；　　4、列表的列宽允许在数组中设置；　　...

3403771864 2022-09-13 21:38 评论0 收藏0
用原生 js &amp;&amp; jquery 实现知乎收起答案功能

摘要：需求很简单，而且和知乎的显示全部收起功能非常相似，但是了一下没有找到类似的，因此决定自己实现一个看了知乎的网页代码。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

brianway 2019-08-20 12:19 评论0 收藏0
用原生 js &amp;&amp; jquery 实现知乎收起答案功能

摘要：需求很简单，而且和知乎的显示全部收起功能非常相似，但是了一下没有找到类似的，因此决定自己实现一个看了知乎的网页代码。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

Seay 2019-08-01 15:57 评论0 收藏0
MUI框架开发HTML5手机APP(二)--页面跳转传值&amp;底部选项卡切换

摘要：三底部选项卡切换页面底部选项卡的切换，可以说是的标志之一。两种模式的显示效果差不多，如下图可见两种模式的区别顾名思义，模式是将所有子页面的内容，分别放置到主页不同的中，当我们点击主页的不同选项卡时，切换不同的显示。概述 JRedu 　　在上一篇博客中，我们学习了如何使用Hbuilder创建一个APP，同时如何使用MUI搭建属于自己的第一款APP，没有学习的同学可以戳链接学习： http...

番茄西红柿 2019-04-23 13:37 评论0 收藏0
前端笔记之CSS（下）浮动&amp;BFC&amp;定位&amp;Hack

摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS：　　样式：　　布局：　　　　标准流(标准文档流、普通文档流)：盒子模型(width/height...

番茄西红柿 2019-04-23 11:44 评论0 收藏0