实现简单的滚动条效果

实现简单的滚动条效果

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

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

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

如上截图所示，我们在最外层容器中给了它一个类“box2”，并且给了它一个左浮动，这个就是存放内容区域的盒子了，也就是我们滚动条的可视区域，然后在里面我们又放了一个div，给了它一个类“whing”,并且给它设置了高度为450px，这个就是内容区域了，里面放需要显示的内容，这里放了一个ul标签，ul标签中放了一些如上图灰色区域所示的li标签，这就是我们需要显示的内容了，有了盒子我们接下来就该去给它设置样式了，其代码如下截图所示：

如上截图所示，我们给最外层容器设置了：“overflow-y: scroll;”，这就代表我们的滚动条是纵向显示的，然后给它设置了外边距和边框，并且还设置了宽度和高度，这就是我们可视区域的大小了，我们可以看到我们可视区域的高度要比内容区域的高度小很多，这样就可以出现滚动条了，当可视区域的高度大于内容区域的高度时滚动条就会消失，就没有滚动条效果了，通过以上代码，我们的滚动条基本上就出来了，其效果如下截图所示：

如上截图所示，我们的滚动条就已经出来了，这时候我们将鼠标移动到这个区域滚动滚轮时下面的内容就能显示出来了，并且滚动条也可以上下移动了，其对比图如下截图所示：

就这样，我们想要的效果就实现了，看着是不是很简单呢?其实代码只要弄懂了也没想象中那么难！