hanyeah

最近用pixijs做东西，需要用到滚动条，自己写了一个，记录一下原理。

滚动条有一个槽（滑杆），有一个滑块，槽的高度和视口的高度一样（先假设是纵向的，横向的原理一样），那么滑块的高度和位置怎么计算呢？和内容的高度、视口的高度，内容的位置之间有什么关系。

其实，滚动条就是内容和视口区域的一个一维的相似模型，类似于游戏中的小地图。

做了个动图。看图，很容易看出来，槽对应的是内容，滑块对应的是视口，滑块的位置对应视口在内容上的位置。