滚动条_滚动条样式 - CSDN
精华内容
参与话题
  • HTML 滚动条实现

    千次阅读 2019-07-03 03:33:29
    ##在对应的div中,添加overflow,固定高度为400px<div class="panel-body" style="height: 400px; overflow:scroll"> <div style="border: 1px #000000; width: 90%; margin: 0 auto;...
    ##在对应的div中,添加overflow,固定高度为400px
    <div class="panel-body" style="height: 400px; overflow:scroll"> <div style="border: 1px #000000; width: 90%; margin: 0 auto;"> <span> </span> </div> </div> 没有水平滚动条 <textarea style="overflow-x:hidden"></textarea> 没有垂直滚动条 <textarea style="overflow-y:hidden"></textarea>

     

    转载于:https://www.cnblogs.com/zhuguangzhe/p/10641410.html

    展开全文
  • 使用css设置漂亮的滚动条样式 使用css设置漂亮的滚动条样式 使用css设置漂亮的滚动条样式
  • 滚动条的设置

    2019-05-26 21:54:18
    滚动条的设置 开发工具与关键技术:DW、VS CSS 作者:木林森 撰写时间:2019年5月25日 在浏览网页的时候,很多细心的网友就会发现我们网页有时候会出现滚动条,大部分是垂直滚动条,而很少会出现水平滚动条。为什么...

    滚动条的设置
    开发工具与关键技术: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

    展开全文
  • html滚动条实现,超简单

    万次阅读 多人点赞 2018-07-04 14:43:22
    在对应的div中,添加overflow,固定高度为400px&lt;div class="panel-body" style="height: 400px; overflow:scroll"&gt; &lt;div style="border: 1px #000000;...l...
    在对应的div中,添加overflow,固定高度为400px
    <div class="panel-body" style="height: 400px; overflow:scroll">
                <div style="border: 1px  #000000; width: 90%; margin: 0 auto;">
                    <span>
            
                </span>
                </div>
            </div>

    水平、垂直滚动条就都有了!也可固定width

    垂直滚动条

    <div class="panel-body" style="height: 400px; overflow-y:scroll">
                <div style="border: 1px  #000000; width: 90%; margin: 0 auto;">
                    <span>
            
                </span>
                </div>
            </div>

    展开全文
  • 因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋) 但是在冒险岛的官网上呈现的样式却是: 明显感觉到视觉上的不同,那么现在我们...

    因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋)

    这里写图片描述

    但是在冒险岛的官网上呈现的样式却是:

    这里写图片描述

    明显感觉到视觉上的不同,那么现在我们就来设置滚动条的样式:
    在所有浏览器,滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因,市面上基于webkit内核的浏览器也是很难穷举完。例如有:Google Chrome、Opera(opera最近宣布使用webkit内核了)、360极速浏览器,猎豹浏览器等,搜狗浏览器······

    下面我们来看一下webkit浏览器是如何强大的吧!首先来了解它的属性:

    滚动条的设置
    1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等
    2. ::-webkit-scrollbar-button 滚动条两端的按钮
    3. ::-webkit-scrollbar-track  外层轨道
    4. ::-webkit-scrollbar-track-piece  内层滚动槽
    5. ::-webkit-scrollbar-thumb 滚动的滑块
    6. ::-webkit-scrollbar-corner 边角
    7. ::-webkit-resizer 定义右下角拖动块的样式

    这里写图片描述

    ::-webkit-scrollbar :滚动条整体部分,其中的属性: width,height,background,border等。

    ::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

    ::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。

    ::-webkit-scrollbar-track-piece :内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。

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

    ::-webkit-scrollbar-corner :边角,两个滚动条交汇处

    ::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)

    下面举一个简单的例子来说明:

    
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>标题</title>
        <style>
            div {
                width: 100px;
                height: 300px;
                border: 2px solid red;
                overflow-x: scroll;
                overflow-y: scroll;
            }
    
            /* 设置滚动条的样式 */
            ::-webkit-scrollbar {
            width:12px;
            background-color: aqua;
            }
    
            /* 滚动槽 */
            ::-webkit-scrollbar-track {
            border-radius:10px;
            }
    
            /* 滚动条滑块 */
            ::-webkit-scrollbar-thumb {
            border-radius:10px;
            background:black;
            }
    
    
        </style>
    
        </script>
    </head>
    <body>
    
    <div id="div1">
        请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,
        JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
        小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的
        实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
        包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
        包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地,大世界是一个Web前端的技术博客。 主要是关于
        HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
        小天地,大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
        小天地,大世界是一个Web前端的技术博客。 主要是关于请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
        小天地,大世界是一个Web前端的技术博客。 主要是关于
        HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
         包含一些PHP语言等的实用例子。
        小天地,大世界是一个Web前端的技术博客。 主要是关于
        HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
         包含一些PHP语言等的实用例子。
        HTML 5,CSS 3,JavaScript,JQuery等。除此之外,还
         包含一些PHP语言等的实用例子。
    </div>
    
    </body>
    </html>

    得到的效果是:
    这里写图片描述

    接着便是对我们的冒险岛的滚动条进行设置:

    /* 
    滚动条的设置
    ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
    ::-webkit-scrollbar-button 滚动条两端的按钮
    ::-webkit-scrollbar-track  外层轨道
    ::-webkit-scrollbar-track-piece  内层滚动槽
    ::-webkit-scrollbar-thumb 滚动的滑块
    ::-webkit-scrollbar-corner 边角
    ::-webkit-resizer 定义右下角拖动块的样式
    */
    
    
    ::-webkit-scrollbar {
        width: 6px;
        background-color: #181c32;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: #5a76cd;
    }
    

    只需要简单的设置滚动条的颜色以及大小,和滚动条里面拖动的部分就可以实现功能了.
    这里写图片描述

    最后实现的功能就是这样.

    但是一定注意:IE8设置滚动条的与这里不一样。

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

    这就是简单的修改滚动条样式的方法!!!

    展开全文
  • js实现垂直滚动条

    千次阅读 2018-08-12 17:37:54
    滚动条长度的计算公式 = 容器的高度/内容的高度*容器的高度 图例如下 滚动条滚动一次,内容移动的距离 = (内容的高度 - 容器的高度)/(容器的高度 - 滚动条高度)*滚动条移动的距离 代码如下 &lt;!...
  • 滚动条

    2019-07-16 05:01:17
    滚动条 创建三个滚动条代表红,蓝,绿三种颜色的混合比列。用户拖拉或者单击时会显示颜色的值。 当你点击退出按钮时,窗体就会退出。当点击提交按钮时,会显示一个信息填写框提供给用户填写。 java code: ...
  • HTML5滚动条

    千次阅读 2019-02-28 09:30:51
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...滚动条&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;marquee behavior="alterna
  • 给div添加滚动条

    千次阅读 2019-10-22 09:36:06
    Demo: <!--记住宽和高一定要设置,否则不行--> <div style=" overflow-y:auto;...1上面是对水平滚动条和垂直滚动条分别设置,可以直接替换为"overflow:auto" 2如果要单独设置水平滚...
  • CSS-界面滚动时不显示滚动条

    万次阅读 2020-05-13 10:55:42
    最近产品提出一个需求,在界面滚动时,元素右侧不显示滚动条。查了网上的答案,最后总结了一下几个情况。 1、设置常规的滚动条:使用 overflow:auto。父元素需要设置一个高度,设置相对定位,这样子元素的高度大于...
  • Js-添加滚动条

    万次阅读 2016-08-16 15:06:59
    我遇到的问题是滚动条可以添加,但是下面的保存和返回按钮显示不出来 就想了个方法,在指定的table外面设置了一个滚动条,设置了固定大小 然后问题就解决了。 滚动条的具体代码;height:550px;overflow-y:scroll;...
  • 滚动条详解

    2018-12-05 20:38:19
    对上一天学习的回顾:  1&gt;.&nbsp;&nbsp;TextOut函数的使用  TextOut函数的作用是使用系统当前选择的字体、背景颜色以及正文颜色将一个字符串输出到指定位置,&nbsp;函数原型: ...
  • CSS3自定义滚动条样式 -webkit-scrollbar

    万次阅读 多人点赞 2014-10-23 15:24:00
    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持...
  • div:给div加滚动条 div的滚动条设置

    万次阅读 多人点赞 2011-04-13 09:15:00
    今天做了个例子: div 的滚动条问题: 两种方法: 一、 <div style=" overflow:scroll; width:400px; height:400px;”></div><br />记住宽和高一定要设置噢,否则不成的 <br />不过...
  • vue element隐藏组件滚动条scrollbar使用

    万次阅读 多人点赞 2018-03-28 21:49:01
    pc端项目中,有时候会在页面内部出现滚动条的情况,windows浏览器默认的滚动条是很丑的,尤其是当滚动天出现在页面内部的时候,这时候,为了页面美观,可以考虑优化滚动条样式。 vue Element UI官方文档上并没有...
  • 使用js或者jq设置滚动条滚动位置

    万次阅读 2018-01-28 22:45:31
    js原生方法scrollTo js原生设置x轴和y轴就一个方法,首先...如果只想设置y轴的滚动条位置,首先需要获取到当前x轴的滚动条位置,然后再设置y轴,如: dom.scrollTo(dom.scrollLeft, 100); //设置y轴滚动一百像素
  • 一个丑丑的滚动条在某些时候是非常碍眼的,移动端由于屏幕小的缘故,更是显眼,最好还是让它能不出现,就不出现。除了用div遮罩外,许多浏览器内核也提供了私有属性控制滚动条的样式。移动端多为weibkit内核,滚动条...
  • Html body的滚动条禁止与启用

    万次阅读 2013-07-26 15:39:54
    今天搞了一个功能,上下左右居中,模仿QQ空间里的样式,把横向和纵向滚动条禁止掉代码如下:  //禁止滚动条  $(document.body).css({  "overflow-x":"hidden",  "overflow-y":"hidden"  });    //...
  • 原因想要做响应式设计,遇到——本来没有滚动条,缩小窗口时出现竖直滚动条,因为获取不到document+滚动条的宽度,所以可能莫名其妙的,没有在设置好的断点处达成相应效果。所以需要获取整个页面包括滚动条的宽度做...
  • html中如何去掉浏览器右边的滚动条

    万次阅读 2018-07-12 17:05:10
    &lt;body style="overflow-x: hidden"&gt;:表示去掉水平滚动条。&lt;body style="overflow-y: hidden"...:表示隐藏横向滚动条,显示纵向滚动条:&lt;body style="ov
1 2 3 4 5 ... 20
收藏数 285,718
精华内容 114,287
关键字:

滚动条