滚动条总结

发表于 | 分类于

和滚动条计算有关的属性

dom.clientHeight（元素的可视区间高度，content+padding，设置border-box后为content的高度）
dom.scrollHeight（元素的高度，content(包含设置overflow不可见的内容)+padding）
dom.scrollTop（元素滚动条距离元素顶部的距离）

滚动条到底
dom.clientHeight=dom.scrollHeight+dom.scrollTop

滚动条样式设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
-webkit-overflow-scrolling: touch;//设置滚动回弹，兼容性不高
.test::-webkit-scrollbar {
        //整个滚动条
        z-index: 10;
        width: p2r(4);
        border-radius: p2r(4);
        background-color: transparent;
    }
.test::-webkit-scrollbar-thumb {
        //滚动滑块
        height:10px ;
        border-radius: p2r(4);
        background-color: #888;
    }

滚动请求的问题

页面数据很多，不可能一次请求，就像最近一次项目中最多可以显示500条数据，这种情况怎么解决呢？考虑监听滚动事件，从滚动到特定位置更新dom即可。
需要注意的细节有很多：

何时请求

本文结束啦感谢您的阅读
undefined