滚动条的设置

滚动条的设置
开发工具与关键技术：DW、VS CSS
作者：木林森
撰写时间：2019年5月25日
在浏览网页的时候，很多细心的网友就会发现我们网页有时候会出现滚动条，大部分是垂直滚动条，而很少会出现水平滚动条。为什么会这样呢？
其实这是为了美观，标准的网页中是不会有水平滚动条的。除非你浏览器页面的缩放比例小于100%的时候不会出现滚动条，当它大于100%的时候就会出现滚动条了。调节页面缩放比例的方法：1.点击页面右上的三点，它会弹出或下拉一个框，里面有它的缩放比例；当然还可以使用快捷：2、点击Ctrl键的同时转动鼠标滚轮，这样也可以实现页面比例的放大缩小；还有一个比较少用的就是：3、菜单栏—查看—页面缩放——选择需要的比例。
为什么会有滚动条出现呢？在任何情况下，如果网页内容超出网页的显示范围，滚动条就会自行出现。我们在很多编程软件中编写代码时，经常会用到滚动条，特别是在编写单个文件代码量很大的时候，滚动条会帮助我们提高编码效率。那么在不同的编写软件中，它是如何设置滚动条的呢？下面将会用Adobe Dreamweaver CC 2017 （下面简称DW）和Visual Studio 2015（下面简称VS）这两个编程软件举例。
在DW中设置滚动条：
首先需要了解一下CSS中的属性，请看下表：
代码 代表的意义
overflow 表示在水平和垂直方向上的滚动条
overflow-x 表示在水平方向上的滚动条
overflow-y 表示在垂直方向上的滚动条
auto 表示网页内容超出网页的显示范围出现滚动条
scroll 表示不管网页内容是否超出网页的显示范围都会出现滚动条
Crollbar-Face-color: 滚动条页面颜色设定
Scrollbar-Highlight-Color :滚动条斜面和左面颜色设定
Scrollbar-Shadow-Color 滚动条下斜面和右面颜色设定
Scrollbar-3Dlight-Color 滚动条上边和左边的边沿颜色设定
Scrollbar-Arrow-Color 滚动条两端箭头颜色设定
Scrollbar-Track-Color 滚动条底版颜色设定
Scrollbar-Darkshadow-Color 滚动条下边和右边的边沿颜色设定
在HTML中，先用一个div设置好宽度和高度，然后再把div的样式设置成overflow-y：auto，当div里面的文字超出那个高度的时候，滚动条就会自动出现。例如;
<//div style=“width:100px; height:100px; overflow-y:auto; border:1px solid #bc5269;”>
除了在div里面设置滚动条，也可以在body里面设置，设置的方法是一样的，body代表的滚动范围就是一整个页面，而div里面设置代表的范围就是一个div而已。

当然有滚动条的显示就会有它的隐藏，隐藏时将样式设置成overflow：hidden就行，也可以将滚动条设置成透明，其实就是讲样式颜色设置为#ffffff，它就可以根据网页的基色来改变，这样就达到透明的效果。
以上就是在DW中设置滚动条，其实在VS中设置滚动条也是一样的，只不过在VS中还能有一些更酷炫的效果，就是它还可以将默认的条状模式变成缩略图模式，这就是上面说的滚动条会帮助我们提高编码效率。
那该如何设置呢？
首先就是打开VS，进入到控制器或者视图就可以看到滚动条，然后在滚动条上右键—滚动条选项，它就会弹出一个模态框，如图1,
图1
然后点击使用垂直滚动条的缩略图模式—点击确认。就可以实现将条状模式变成缩略图模式，它还可以定位到你修改的部位，并且显示缩略的代码，如下图2：
图2
如果不想要修改提示的话，还可以反勾选（在垂直滚动条上显示标注），它的修改提示就会消失，如下图3：
图3