精华内容
下载资源
问答
  • 滚动条样式
    千次阅读
    2020-08-23 22:14:17

    ScrollBars
    用来设置滚动条模式, 有四种选择:

    ScrollBars.None (无滚动条),
    ScrollBars.Horizontal(水平滚动条),
    ScrollBars.Vertical(垂直滚动条),
    ScrollBars.Both(水平和垂直滚动条)

    注意:只有当MultiLine属性为true时,该属性值才有效。在WordWrap属性值为true时, 水平滚动条将不起作用
    

    大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,
    这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法

    div { 
    	scrollbar-face-color: #fcfcfc; 
    	scrollbar-highlight-color: #6c6c90; 
    	scrollbar-shadow-color: #fcfcfc; 
    	scrollbar-3dlight-color: #fcfcfc; 
    	scrollbar-arrow-color: #240024; 
    	scrollbar-track-color: #fcfcfc; 
    	scrollbar-darkshadow-color: #48486c; 
    	scrollbar-base-color: #fcfcfc 
    } 
    

    滚动条样式主要涉及到如下CSS属性:

    overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
    overflow: auto; 在需要时内容会自动添加滚动条
    overflow: scroll; 总是显示滚动条
    overflow-x: hidden; 禁止横向的滚动条
    overflow-y: scroll; 总是显示纵向滚动条
    width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]
    height: 120px; 设置区域的高度[像素/百分比等等]

    BODY { 
    	SCROLLBAR-FACE-COLOR: #f892cc; 
    	SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; 
    	SCROLLBAR-SHADOW-COLOR: #fd76c2; 
    	SCROLLBAR-3DLIGHT-COLOR: #fd76c2; 
    	SCROLLBAR-ARROW-COLOR: #fd76c2; 
    	SCROLLBAR-TRACK-COLOR: #fd76c2; 
    	SCROLLBAR-DARKSHADOW-COLOR: #f629b9; 
    	SCROLLBAR-BASE-COLOR: #e9cfe0 
    } 
    

    SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
    SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
    SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
    SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
    SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
    SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
    SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
    SCROLLBAR-BASE-COLOR: 滚动条的基本颜色

    网页中去掉滚动条:
    去掉横向滚动条:

    <body style='overflow:scroll;overflow-x:hidden'> 
    

    去掉竖向滚动条:

    <body style='overflow:scroll;overflow-y:hidden'> 
    

    两个都去掉:

    <body scroll="no"> 
    

    框加中去滚动条在name="“后面加 scrolling=“No”
    1,Overflow内容溢出时的设置
    overflow 水平及垂直方向内容溢出时的设置
    overflow-x 水平方向内容溢出时的设置
    overflow-y 垂直方向内容溢出时的设置
    以上三个属性设置的值为visible、scroll、hidden、auto
    visible 默认值。使用该值时,无论设置的"width"和"height” 的值是多少,其中的内容无论是否超出范围都将被强制显示。
    hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
    scroll 无论内容是否超越范围,都将显示滚动条。
    auto 当内容超出范围时,显示滚动条,否则不显示。

    应用:
    没有水平滚动条:

    <div style="overflow-x:hidden">test</div> 
    

    没有垂直滚动条

    <div style="overflow-y:hidden">test</div> 
    

    没有滚动条

    <div style="overflow-x:hidden;overflow-y:hidden" style="overflow:hidden">test</div> 
    

    自动显示滚动条

    <divstyle="height:100px;width:100px;overflow:auto;">test</div> 
    

    2,自己定义滚动条的颜色
    我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,
    分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:

    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; 
    } 
    
    更多相关内容
  • webkit滚动条样式重置 1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。 2、scrollbar corner为横向和竖向的交叉角区域 3、resize...
  • css滚动条样式修改的代码 .scroll::-webkit-scrollbar { // 纵向滚动条和横向滚动条宽度 width: 1px; height: 1px; } .scroll::-webkit-scrollbar-thumb { // 滚动条背景条样式 border-radius: 1px; -webkit-...
  • 主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 注:该方法只适用于 -webkit- 内核浏览器 浏览器滚动条太宽,太丑,影响日常开发怎么办,改TA 滚动条外观由2部分组成:1....例如:改变整体页面的滚动条样式 body::-webkit-scrollbar{ //先改变body的滚动条宽度
  • 本文介绍了css3自定义滚动条样式写法,分享给大家,具体如下: 先简单介绍一下各个属性 ::-webkit-scrollbar :滚动条整体部分,其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button :滚动...
  • js 自定义滚动条样式

    2018-05-17 11:47:36
    js 自定义滚动条样式 颜色大小在css调节 绑定节点在js代码第一个函数修改
  • HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式
  • 网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,下面就是相关语法:新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础...
  • 好看的滚动条样式

    2019-04-07 01:04:33
    NULL 博文链接:https://hjy2099.iteye.com/blog/1562338
  • 修改火狐滚动条样式demo,纯css修改火狐默认的滚动条样式
  • Qt悬浮滚动条-滚动条样式,实现滚动条不占用控件的宽高,深度美化滚动条以及Qt滚动条的使用体验
  • html滚动条样式

    2020-10-30 08:16:37
    对于页面的滚动条实现效果代码,整理的比较全的,讲解的也比较详细了
  • element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的...
  • 自定义recyclerView的滚动条样式,可以定义seekbar的颜色值与大小,设置滚动条离顶部与底部的距离等等
  • CSS 设置滚动条样式的实现代码如下所示: •::-webkit-scrollbar 滚动条整体部分 •::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) •::-...
  • DIV滚动条就是利用DIV标签,在里面嵌入CSS样式表,当div所定义的区域的内容达到一定程度时,在div标签里面嵌入CSS样式表,定义overflow的属性值,设置DIV滚动条相关的属性。 这里向大家描述一下DIV滚动条属性及样式...
  • Blend基础上制作的滚动条样式,当滚动条滚动时才会显示滚动条 https://download.csdn.net/download/dycx880709/9642078代码有问题,一直没有更新,非常抱歉
  • 滚动条样式设置

    2014-11-07 17:41:23
    滚东条样式设置 不兼容火狐 可修改浏览器默认的滚动条 属用内核修改
  • 本篇文章主要介绍了CSS3自定义滚动条样式的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但是大家都知道自带的不好看。接下来就是重点了,如何修改滚动条样式呢?感兴趣的朋友可以了解下本
  • 写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条样式 这次算统一整理下方法,直接上代码。 &::-webkit-scrollbar { // 滚动条的背景 width: 16px; background: #...
  • 使用css设置漂亮的滚动条样式 使用css设置漂亮的滚动条样式 使用css设置漂亮的滚动条样式
  • css滚动条样式自定义

    千次阅读 2021-08-05 03:11:56
    很简单的几行代码Title* {margin: 0;padding: 0;}.out {width: 600px;...}/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */.out::-webkit-scrollbar {width: 5px;height: 5px;}/* 滚动条里面小方块 */...

    很简单的几行代码

    Title

    * {

    margin: 0;

    padding: 0;

    }

    .out {

    width: 600px;

    height: 600px;

    margin: 100px auto;

    overflow-y: auto;

    }

    /* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */

    .out::-webkit-scrollbar {

    width: 5px;

    height: 5px;

    }

    /* 滚动条里面小方块 */

    .out::-webkit-scrollbar-thumb {

    border-radius: 5px;

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    background: rgba(0,0,0,0.2);

    }

    /* 滚动条里面轨道 */

    .out::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    border-radius: 0;

    background: rgba(0,0,0,0.1);

    }

    段落一

    段落二

    段落三

    最终效果图:

    58e498f650f3119018762d3f7ad2a788.png

    HTML&plus;CSS 滚动条样式自定义 - 适用于 div&comma;iframe&comma; html 等

    友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 ...

    css 滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

    css滚动条样式修改

    .activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...

    CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

    CSS滚动条样式定制

    效果图如下

    展开全文
  • 带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义,带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义
  • wpf滚动条样式

    2015-11-18 14:45:08
    文件里面有两个样式资源文件,在项目的加载资源文件修改资源文件名称就可以看见两个样式风格。
  • CSS设置滚动条样式

    千次阅读 2022-03-24 14:27:46
    今天在写一个项目的时候遇到了,这样一个小难点 要设置一个类似于页面的滚动条,查阅了相关文档之后,我会了

    今天在写一个项目的时候遇到了,这样一个小难点
    在这里插入图片描述
    要设置一个类似于页面的滚动条,查阅了相关文档之后,我会了

    一、我们可以使用overflow属性设置是否出现滚动条overflow:scroll /* x y 方向都会*/

    或者

    overflow-x:scroll /只是x方向/

    或者

    overflow-y:scroll /只是y方向/

    当块级内容区域超出块级元素范围的时候,就会以滚动条的形式展示,你可以滚动里面的内容,里面的内容不会超出块级区域范围。

    二、使用scrollbar属性设置滚动条样式::-webkit-scrollbar 滚动条整体部分

    ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的

    ::-webkit-scrollbar-button 滚动条两端的按钮

    ::-webkit-scrollbar-track 外层轨道

    ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)

    ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那个

    ::-webkit-scrollbar-corner 边角

    ::-webkit-resizer 定义右下角拖动块的样式

    详细的css属性

    :horizontal 水平方向的滚动条

    :vertical 垂直 方向的滚动条

    :decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)

    :increment decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)

    :start 伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

    :end 类似于start伪类,标识对象是否放到滑块的后面。

    :double-button 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。

    :single-button 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。

    :no-button 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。

    :corner-present 用于所有滚动条轨道,指示滚动条圆角是否显示。

    :window-inactive 用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

    示例:

    /*里面的代码可以根据自己需求去进行更改*/
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
    width:12px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    border-radius:10px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
    }
    

    示例:定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸

    ::-webkit-scrollbar{
    
    width:16px;
    
    height:16px;
    
    background-color:#F5F5F5;
    
    }
    
    /*定义滚动条轨道
    
    内阴影+圆角*/
    
    ::-webkit-scrollbar-track{
    
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    
    border-radius:10px;
    
    background-color:#F5F5F5;
    
    }
    
    /*定义滑块
    
    内阴影+圆角*/
    
    ::-webkit-scrollbar-thumb{
    
    border-radius:10px;
    
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    
    background-color:#555;
    
    }
    

    IE浏览器的滚动条设置

    IE下面就比较简单那了,自定义的项目比较少,全是颜色。

    1. scrollbar-arrow-color: color; /三角箭头的颜色/
    2. scrollbar-face-color: color; /立体滚动条的颜色(包括箭头部分的背景色)/
    3. scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/
    4. scrollbar-highlight-color: color; /滚动条的高亮颜色(左阴影?)/
    5. scrollbar-shadow-color: color; /立体滚动条阴影的颜色/
    6. scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/
    7. scrollbar-track-color: color; /立体滚动条背景颜色/
    8. scrollbar-base-color:color; /滚动条的基色/

    三、去除搜索框外面的边框

    添加css属性,这样点击时就不会有蓝色边框了{outline:none;}

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 114,109
精华内容 45,643
关键字:

滚动条样式

友情链接: WinDLX.zip