Element 2 组件源码剖析之ScrollBar滚动条（一）

Andurils
2,024 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

简介

滚动条组件ScrollBar解决了其跨浏览器差异性,保证了组件库整体的风格统一。作为内部组件，组件已经导出，跟其他组件一样正常使用，但是没有公开的说明文档。本文将介绍其功能，分析其源码实现，耐心读完，相信会对您有所帮助。

📚 本专栏 gitbook 已发布 🎉《Learning Element 2》 。

更多组件剖析详见 👉 📚 Element 2 源码剖析组件总览 。

原生滚动条

以Windows系统下Edge的滚动条scrollbar，介绍下滚动条元素。

  • scrollbar-button 滚动条上的按钮（上下箭头）。
  • scrollbar-thumb 滚动条上的滚动滑块。
  • scrollbar-track 滚动条轨道。
  • scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
  • resizer 出现在某些元素底角的可拖动调整大小的滑块。

image.png

出元素可调整大小时 , resize属性值设置为both、horizontal、vertical， 右下角的 corner 就会选渲染成成 resizer。

image.png

CSS3中提供了::-webkit-scrollbar、::-webkit-scrollbar-button、::-webkit-scrollbar-thumb ::-webkit-scrollbar-thumb、::-webkit-scrollbar-corner、::-webkit-resizer相关属性用于修改浏览器的滚动条样式，但作为非标准特性存在兼容问题,无法用于生产环境中。
image.png

::-webkit-scrollbar 仅在基于 Blink 或WebKit 的浏览器上可用。具体兼容性详见 '::-webkit-scrollbar',caniuse

本文的示例讲解主要以垂直滚动条为主,先介绍几个重要的属性。

clientHeight

clientHeight是元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。

`clientHeight` =  内容 `height` + 上下内边距和 `padding` - 水平滚动条高度 || 0

image.png

scrollHeight

scrollHeight 是一个元素内容高度，包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值clientHeight相同。

scrollHeight 包括元素的内边距 padding，但不包括元素的 边框和外边距。

scrollTop

scrollTop用于获取或设置一个元素的内容垂直滚动的像素数。一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

image.png

📚参考&关联阅读

"CSS/::-webkit-scrollbar",MDN
"Element/clientHeight",MDN
"Element/scrollHeight",MDN
"Element/scrollTop",MDN

avatar
文章
阅读
粉丝