`
ipython
  • 浏览: 293846 次
  • 性别: Icon_minigender_1
  • 来自: 佛山
社区版块
存档分类
最新评论

chrome 滚动条

    博客分类:
  • web
 
阅读更多

  有时候,对页面要求美观,但是默认滚动条太丑了,要修改一下。

  在Chrome中,应该是这样,在style中加入一些代码即可,你也可以修改Chrome的custom.css文件,从而使所有页面的滚动条都有修改。

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Chrome scroll</title>
     <style type="text/css" media="screen">
        ::-webkit-scrollbar-track-piece{
            background-color:#fff;
            -webkit-border-radius:3;
        }
        ::-webkit-scrollbar{
            width:15px;
            height:8px;
        }
        ::-webkit-scrollbar-thumb{
            height:30px;
            background-color:#999;
            -webkit-border-radius:7px;
            outline:2px solid #fff;
            outline-offset:-2px;
            border: 2px solid #fff;
        }
        ::-webkit-scrollbar-thumb:hover{
            height:30px;
            background-color:#9f9f9f;
            -webkit-border-radius:8px;
        }
        ul {margin:0px; padding:0px; width:100px; height:200px; overflow-x:hidden; overflow-y:auto;}
     </style>
</head>
<body>
    <ul>
        <li>aaaaaaaaaaaaaa</li>
        <li>bbbbbbbbbbbbbb</li>
        <li>cccccccccccccc</li>
        <li>dddddddddddddd</li>
        <li>eeeeeeeeeeeeee</li>
        <li>ffffffffffffff</li>
        <li>aaaaaaaaaaaaaa</li>
        <li>aaaaaaaaaaaaaa</li>
        <li>bbbbbbbbbbbbbb</li>
        <li>cccccccccccccc</li>
        <li>dddddddddddddd</li>
        <li>eeeeeeeeeeeeee</li>
        <li>bbbbbbbbbbbbbb</li>
        <li>cccccccccccccc</li>
        <li>dddddddddddddd</li>
        <li>eeeeeeeeeeeeee</li>
</body>
</html>
 

 

分享到:
评论

相关推荐

    Chrome 滚动条美化 原创

    Chrome 滚动条美化 原创 淡雅风格, 不仔细看看不出来, 而且类似透明效果 将文件复制到 win7系统: C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets windows xp类似: 到 C:\*******...

    还原Chrome滚动条到windows7状态的扩展

    由扁平还原到立体的扩展,crx格式,适合Chrome和360极速浏览器等Chromium内核的浏览器。使用方法:拖动到Chrome的扩展管理页面中。

    perfectscrollbar轻量级的滚动条外观与mac上chrome的滚动条一样

    通过修改这些类的样式,可以实现与Mac上Chrome滚动条类似的外观。 需要注意的是,虽然`Perfect Scrollbar`提供了良好的兼容性和易用性,但在某些低版本浏览器或特定环境下可能存在问题。因此,在实际项目中使用时,...

    css美化滚动条

    需要注意的是,这些CSS3的滚动条样式目前仅在Webkit内核的浏览器(如Chrome、Safari)中支持,对于Firefox、Edge等其他浏览器,需要使用它们特定的语法,或者借助JavaScript库实现跨浏览器的滚动条美化。 六、...

    CSS自定义WebKit内核浏览器滚动条实现代码

    传统的浏览器滚动条通常是浏览器自身提供的默认样式,但随着Web标准的发展,特别是CSS的进步,开发者现在可以使用CSS来自定义WebKit内核浏览器(例如Chrome和Safari)的滚动条样式,而不必依赖于非标准的扩展或...

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx

    JavaScript 自定义浏览器滚动条兼容 IE、火狐和 chrome 本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条,可以实现跨...

    webbrowser滚动条隐藏

    这些选择器是WebKit引擎(包括Chrome和Safari)特有的,可以用来定制滚动条的样式。若要隐藏滚动条,我们可以在CSS中设置宽度为0: ```css ::-webkit-scrollbar { width: 0; /* 隐藏横向滚动条 */ } ::-webkit-...

    IE滚动条 CSS样式

    在网页设计中,为了提升用户体验,设计师们常常会利用CSS(Cascading Style Sheets)来定制浏览器的滚动条...不过,随着IE浏览器逐渐被淘汰,开发者可能需要更多地关注对Chrome、Firefox等现代浏览器的滚动条样式支持。

    JS去除iframe滚动条的方法

    然而,有时嵌入的网页内容尺寸可能会超过iframe的可视区域,这时浏览器会自动为iframe添加滚动条,以便用户能够滚动查看整个内容区域。虽然这对于某些情况可能是必要的,但在其他一些情况下,开发者可能希望去除滚动...

    好看的滚动条样式

    注意,这些CSS滚动条样式主要是基于WebKit的,所以它们在Safari和Chrome等基于WebKit的浏览器中工作良好,但不适用于Firefox和Internet Explorer。对于其他浏览器,可能需要使用JavaScript库或者特定的浏览器前缀...

    HTML中滚动条各种样式示例

    目前,大多数自定义滚动条的样式仅在支持Webkit前缀的浏览器(如Chrome、Safari)中有效。所以,我们需要使用`-webkit-scrollbar`、`-webkit-scrollbar-thumb`、`-webkit-scrollbar-track`等属性来定义样式。 3. *...

    重叠式滚动条::artist_palette:重叠式滚动条可自定义主题,适用于基于Firefox和Chrome的浏览器

    这种技术尤其适用于现代浏览器,如Firefox和Chrome,它们提供了丰富的CSS支持以实现自定义滚动条样式。在本话题中,我们将深入探讨如何利用CSS、Stylus以及Firefox和Chrome的特定CSS扩展来实现重叠式滚动条。 首先...

    flex滚动条三种实现方式

    总结来说,Flex布局中的滚动条实现主要分为默认滚动条和自定义滚动条两种方式。默认滚动条适用于快速开发,而自定义滚动条则能更好地融入到页面设计中,提供更一致的用户体验。需要注意的是,自定义滚动条的兼容性和...

    textArea滚动条样式

    首先,我们需要理解CSS3提供了对滚动条样式的一些控制,如`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素,但这些样式只在Webkit内核的浏览器(如Chrome、Safari)中有效。对于Firefox、IE/Edge等非...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    在网页设计中,滚动条是不可或缺的元素,尤其是在内容超过屏幕显示范围时。HTML和CSS是构建网页的基础,其中HTML负责结构,CSS负责样式。本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式,...

    自定义滚动条(兼容所有浏览器)

    - `::-webkit-scrollbar` 用于选择Webkit内核浏览器(如Chrome和Safari)的滚动条整体。 - `::-webkit-scrollbar-thumb` 选择滚动条上的滑块部分。 - `::-webkit-scrollbar-track` 选择滚动条的轨道部分。 - `::-...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    但是,随着 CSS3 的发展,现代浏览器(如 Chrome、Firefox 和 Safari)引入了 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 等伪元素,使得我们可以自定义滚动条的外观。 以下是一些关键的 CSS 属性,...

    div滚动条优化

    CSS3引入了`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`伪元素,允许开发者对Webkit内核的浏览器(如Chrome和Safari)的滚动条进行样式定制。例如,以下代码可以将滚动条宽度设置为10px,滚动条轨道(即滚动...

    jquery很炫的滚动条效果

    在网页设计中,用户体验往往受到各种细节的影响,其中之一就是滚动条。一个美观且功能完善的滚动条可以提升网站的视觉效果和交互体验。本教程将深入探讨如何使用jQuery创建一款炫酷的滚动条效果,该效果代码简洁,...

    js模拟滚动条

    为了改变这一情况,我们可以利用CSS3的伪元素`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`来定制滚动条的样式,但这仅限于Webkit内核的浏览器,如Chrome和Safari。对于Firefox、Edge等其他浏览器,我们需要...

Global site tag (gtag.js) - Google Analytics