关于滚动条的那些事

项目中用到的滚动条主要集中在两个方面,一是需要进行滚动条的样式设置,适配网站的整体UI;二是获取滚动条的属性,进行页面滑动方面的交互:比如说滑动定位已经滑动加载等

滚动条样式的设置

基于webkit的浏览器

1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽高

2. ::-webkit-scrollbar-thumb 滚动条

3. ::-webkit-scrollbar-track 滚动条的轨道

4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮

5. ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分

6. ::-webkit-scrollbar-corner 边角,即垂直滚动条和水平滚动条相交的地方

7. ::-webkit-resizer 垂直和水平滚动条交汇处用于拖动调整元素大小的控件

滚动条组成结构图:

webkit浏览器用于滚动条的伪类

:horizontal 适用于水平方向上的滚动条

:vertical 适用于垂直方向上的滚动条

:decrement 适用于递减的按钮和轨道碎片

:increment 适用于递增的按钮和轨道碎片

:start 适用于按钮和轨道碎片。表示对象是否放在滑块的前面

:end 适用于按钮和轨道碎片。表示对象是否放在滑块的后面

:double-button 适用于按钮和轨道碎片。判断轨道碎片是否紧挨一对在一起的按钮

:single-button 适用于按钮和轨道碎片。判断轨道碎片是否紧挨一个单独的按钮

:no-button 表示轨道碎片没有紧挨按钮

:corner-present 表示滚动条的角落是否存在

:window-inactive 表示包含滚动条的区域,焦点不在该窗口的时候

当然也可以使用jQuery的滚动条插件nanoscroller和vue的滚动条插件vue-happy-scroll 进行滚动条样式的设置

滑动事件

下拉加载

1.获取当前可视范围的高度 document.documentElement.clientHeight||document.body.clientHeight

2.获取滚动条距离顶部的高度 document.document.scrollTop||$().offset().top

3.获取整个页面的高度 document.documentElement.scrollHeight||document.body.scrollHeight||

$(window).Height()

4.判断可视范围高度+滚动条距离顶部高度=== 页面高度 等于则到达底部

上划固定

1.获取当前元素距离顶部的高度 $().offset().top||document.getElementById().scrollTop

2.获取滚动条距离顶部的高度

3.当当前元素距离顶部的高度小于滚动条距离顶部高度时,固定

以上是 关于滚动条的那些事 的全部内容, 来源链接: www.h5w3.com/25867.html

回到顶部