浏览器滚动条样式还可以改变，你知道吗？

fjcgreat 发布于2019-08-30 15:53 / 638人阅读

摘要：有时候，我们是不是觉得浏览器默认的滚动条很，那么浏览器滚动条样式能否改变呢，答案是肯定的，今天就给大家分享一下怎么改变浏览器的默认滚动条，让我们的页面更加炫酷。

有时候，我们是不是觉得浏览器默认的滚动条很low，那么浏览器滚动条样式能否改变呢，答案是肯定的，今天就给大家分享一下怎么改变浏览器的默认滚动条，让我们的页面更加炫酷。

在次之前，我们先来了解一下滚动条产生的原因，通俗的来讲就是内容超出容器就会出现滚动条。

verflow介绍

定义：overflow 属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容。
属性值

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto       //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
overflow:inherit    //规定从该父元素继承overflow属性的值`

注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
当overflow设为除默认值（visible）以外的值时，将会创建一个会块级式化上下文（清除浮动的一种方式），更多可查看深入理解BFC和Margin Collapse

下面直接进入教程，以Google浏览器为例：

效果图：

webkit内核的浏览器滚动条样式

首先给两个div，两个div是父子关系，里面的div宽高比外面的宽高值大，再加上overflow：hidd属性模拟出现滚动条效果，然后进行css更改样式。

html部分

css样式

这里给大家做了个图,方便大家理解：

自定义IE浏览器滚动条样式

IE浏览器，就比较简单了，直接定义整个页面的滚动条，但IE浏览器只能更换颜色不能设置背景颜色。

body {
   scrollbar-arrow-color: #f4ae21;                /*三角箭头的颜色*/

   scrollbar-face-color: #333;                    /*立体滚动条的颜色*/

   scrollbar-3dlight-color: #666;                 /*立体滚动条亮边的颜色*/
 
   scrollbar-highlight-color: #666;               /*滚动条空白部分的颜色*/

   scrollbar-shadow-color: #999;                  /*立体滚动条阴影的颜色*/

   scrollbar-darkshadow-color: #666;              /*立体滚动条强阴影的颜色*/

   scrollbar-track-color: #666;                   /*立体滚动条背景颜色*/

   scrollbar-base-color:#f8f8f8;                  /*滚动条的基本颜色*/

   Cursor:url(mouse.cur);                         /*自定义个性鼠标*/
 }

GPU云服务器云服务器滚动条样式 asp 滚动条样式你知道你应该知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116612.html

编写自适应高度的 textarea

摘要：但是现在产品经理说了需要这个文本框可以根据用户输入内容自适应其高度。想法很简单，当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛，那么自然而然就能想到这个属性。就应该是用户输入文本的真实高度，至少超过文本框既定高度时是这样。文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适...

only_do 2019-08-23 15:27 评论0 收藏0
编写自适应高度的 textarea

摘要：但是现在产品经理说了需要这个文本框可以根据用户输入内容自适应其高度。想法很简单，当用户输入的文本超过了文本框自身高度时不是会出现滚动条嘛，那么自然而然就能想到这个属性。就应该是用户输入文本的真实高度，至少超过文本框既定高度时是这样。文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 textarea 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适...

wenzi 2019-08-02 14:19 评论0 收藏0
修改bootstrap table 源码实现固定高时自定义滚动条的样式

摘要：同时在里，大概第行，有一些用来计算滚动条宽度的样式。下面是显示效果，分别为有滚动条时候和无滚动条时候。至此，自定义滚动条样式就完成了。 bootstrap table 其方便性与实用性已不言而喻，然，在我们实际应用中总是有这种那种的需求，比如我近期遇到的，就是需要自定义滚动条 = =，不过话说初始滚动条确实有点难看... 现在大多数网站滚动条都还是...

littleGrow 2019-08-29 12:40 评论0 收藏0
修改bootstrap table 源码实现固定高时自定义滚动条的样式

摘要：同时在里，大概第行，有一些用来计算滚动条宽度的样式。下面是显示效果，分别为有滚动条时候和无滚动条时候。至此，自定义滚动条样式就完成了。 bootstrap table 其方便性与实用性已不言而喻，然，在我们实际应用中总是有这种那种的需求，比如我近期遇到的，就是需要自定义滚动条 = =，不过话说初始滚动条确实有点难看... 现在大多数网站滚动条都还是...

anRui 2019-08-20 17:00 评论0 收藏0