摘要:在有滚动条时讨论才有意义,在没有滚动条时恒成立。单位,只读元素代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。当前元素顶部距离最近父元素顶部的距离和有没有滚动条没有关系。
通讯录式的吸顶效果,当前bar固定在顶部 方法一: js 监听 onscroll 事件
实现原理
吸顶的那个 bar 其实是一个定位在屏幕最上的一个元素,把下面 各个区块的高度累加放到一个数组里 [0, 740, 990, 1310, ...]
拿当前滚动体滚过的距离去上面的数组里找对应的区间,然后将 bar 的文字填充进去
拿所在区间的 上限值 - 滚动值 = 偏移量
var fixedTop = (diff > 0 && diff < 40) ? diff - 40 : 0
根据上面 fixedTop 设置偏移量 fixedDom.style.transform = translate3d(0, ${fixedTop}px, 0)
具体代码如下
吸顶效果
const el = document.scrollingElement || document.documentElement
const top = el.scrollTop
问题如下
在混杂模式下,由于所有浏览器均使用 document.body.scrollTop 获取页面的垂直滚动条的位置,所以不会出现兼容性问题。
而在标准模式下,由于 Chrome 与 Safari 仍然使用 document.body.scrollTop,而对于 document.documentElement.scrollTop 返回为 0。
顺便再说说 document.scrollingElement 这个属性。可能是浏览器厂商们也觉得现在的页面滚动元素太乱,一会儿 BODY 一会儿 HTML,跟页面模式有关,还跟 Webkit 的遗留 BUG 有关,于是搞出来这么个东西。根据 MDN 的介绍:
Document 的 scrollingElement 是一个只读属性,始终指向页面滚动元素
各个区块的高度计算 参考文章var listGroup = $cls(".list-group-item") let height = 0 this.listHeight.push(height) listGroup.forEach(item => { height += item.clientHeight this.listHeight.push(height) })
clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop 的区别
clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,其中:
clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
scrollHeight
scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,
在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。
而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。
在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素
scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。
2019-07-09 更新方法二:position: sticky
sticky: 粘性布局,基本上,可以看作是 position: relative 和 position: fixed 的结合体 ——当元素在屏幕内,表现为 relative ,就要滚出显示器屏幕的时候,表现为 fixed
对元素设置: position: -webkit-sticky; position: sticky; top: 0; // 左右也可以设置 left
上栗的吸顶效果可以用 sitcky 实现
// 将上述代码改成 如下即可,注意其祖先元素不可有 overflow: visible 以外的元素 .list-group-title { postion: sticky; top: 0; }
注意事项:
父级元素不能有任何 overflow: visible 以外的设置,否则就没有粘滞效果
父级元素不能设置固定的 hight 高度值
同一个父容器中的 sticky 元素,如果定位值相同,则会重叠;如果属于不同父元素,则会鸠占鹊巢,挤开原来的元素,依次形成占位效果。(吸顶效果)
sticky 定位,不仅可以设置 top,基于 滚动容器上边缘定位;还可以设置bottom,left,right
sticky 参考张鑫旭大佬的文章 sticky
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101353.html
摘要:不过要是一个简单的小项目,没那么多要求的话,纯还是能很好的适用的,性能上绝对要比通过滚动监听强上好多倍,而且引用方便,只要数据生成了就可以直接使用 我们经常在手机上看到通讯录列表,这类布局一般有两个显著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸顶 快速定位 下...
摘要:不过要是一个简单的小项目,没那么多要求的话,纯还是能很好的适用的,性能上绝对要比通过滚动监听强上好多倍,而且引用方便,只要数据生成了就可以直接使用 我们经常在手机上看到通讯录列表,这类布局一般有两个显著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸顶 快速定位 下...
摘要:不过要是一个简单的小项目,没那么多要求的话,纯还是能很好的适用的,性能上绝对要比通过滚动监听强上好多倍,而且引用方便,只要数据生成了就可以直接使用 我们经常在手机上看到通讯录列表,这类布局一般有两个显著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸顶 快速定位 下...
阅读 1308·2023-04-25 23:42
阅读 2565·2021-11-19 09:40
阅读 3489·2021-10-19 11:44
阅读 3469·2021-10-14 09:42
阅读 1827·2021-10-13 09:39
阅读 3748·2021-09-22 15:43
阅读 601·2019-08-30 15:54
阅读 1425·2019-08-26 13:32