实现简单的滚动条效果

实现简单的滚动条效果

开发工具与关键技术：VS2015、CSS
作者：易金亮
撰写时间：2019.06.04

说起滚动条我相信大家并不陌生，因为滚动条实在是太常见了，只要是使用电脑，滚动条就会出现在我们的视野中，当我们转动鼠标的滚轮将网页往上拉动时，电脑显示屏的右侧就会出现一个移动的“长条”，这个“长条”就是我们说的滚动条了，那么，滚动条是如何实现的呢？正好我最近做的一个项目中就有要实现滚动条这一效果，下面我就借这个项目来说说如何实现滚动条效果，项目中的滚动条如下截图所示：

如上截图所示就有两个滚动条，一个是横向的，另一个则是纵向的，到这里我们可能会觉得滚动条挺复杂的，既有横向的又有纵向的，其实并不复杂，这里我们只需要用到一个属性就可以实现上面的效果了，那就是“overflow-x(y): scroll;”,当我们设置的是overflow-x: scroll;时它就是一个横向的滚动条，而当我们设置的是overflow-y: scroll;时它就是一个纵向的滚动条，这么一说是不是觉得滚动条没那么复杂了呢？下面我们就来实现这个效果吧，要实现上图所示的效果，首先我们就应该有一个存放内容的盒子