当前位置: 开发笔记 > 前端 > 正文

用CSS调整scrollbar(滚动条)的配色

作者：key920721 | 来源：互联网 | 2023-05-18 10:51

PSD转html，设计稿上，有一处内嵌的介绍信息，当文字过长时，要求使用一个经过处理的滚动条来展示。如果仅要求IE浏览器，可以通过调整CSS的方式，来给滚动条换色。代码如下：

PSD转html，
设计稿上，有一处内嵌的介绍信息，当文字过长时，要求使用一个经过处理的滚动条来展示。

如果仅要求IE浏览器，可以通过调整CSS的方式，来给滚动条换色。

代码如下：

    .uicss-cn
    {
    height:580px;overflow-y: scroll;
    scrollbar-face-color:#EAEAEA;
    scrollbar-shadow-color:#EAEAEA;
    scrollbar-highlight-color:#EAEAEA;
    scrollbar-3dlight-color:#EAEAEA;
    scrollbar-darkshadow-color:#697074;
    scrollbar-track-color:#F7F7F7;
    scrollbar-arrow-color:#666666;
    }

具体样式对应的scrollbar区域如图：

scrollbar

推荐阅读

webkit
css 回到顶部按钮

本文由编程笔记#小编为大家整理，主要介绍了css回到顶部按钮相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-10-17 13:38:49
overflow
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
overflow
HTML中表格的页眉页脚布局解决方案

本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术，避免使用内联样式和固定定位，实现了一个标准的页眉页脚布局。提供了一个替代的解决方案，为读者提供了参考。 ... [详细]

蜡笔小新 2023-12-10 15:50:47
overflow
Java源代码安全审计（二）：使用Fortify-sca工具进行maven项目安全审计

本文介绍了使用Fortify-sca工具对maven项目进行安全审计的过程。作者通过对Fortify的研究和实践，记录了解决问题的学习过程。文章详细介绍了maven项目的处理流程，包括clean、build、Analyze和Report。在安装mvn后，作者遇到了一些错误，并通过Google和Stack Overflow等资源找到了解决方法。作者分享了将一段代码添加到pom.xml中的经验，并成功进行了mvn install。 ... [详细]

蜡笔小新 2023-12-10 13:01:22
ajax
DataTables插件介绍及使用方法

本文介绍了DataTables插件的官方网站以及其基本特点和使用方法，包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性，以及国际化和动态创建表格的功能。此外，还提供了参数初始化和延迟加载的示例代码。 ... [详细]

蜡笔小新 2023-12-09 17:40:33
overflow
CSS样式属性text-overflow、overflow、white-space、width的使用

本文介绍了CSS样式属性text-overflow、overflow、white-space、width的使用方法和效果。通过设置这些属性，可以实现文本溢出省略号、隐藏溢出内容、禁止换行以及限制元素宽度等效果。详细讲解了每个属性的作用和用法，以及常见的应用场景和注意事项。对于前端开发者来说，掌握这些CSS样式属性的使用方法，能够更好地实现页面布局和文本显示效果。 ... [详细]

蜡笔小新 2023-12-09 08:49:24
scroll
Tkinter Frame容器grid布局并使用Scrollbar滚动原理

本文介绍了如何使用Tkinter实现Frame容器的grid布局，并通过Scrollbar实现滚动效果。通过将Canvas作为父容器，使用滚动Canvas来滚动Frame，实现了在Frame中添加多个按钮，并通过Scrollbar进行滚动。同时，还介绍了更新Frame大小和绑定滚动按钮的方法，以及配置Scrollbar的相关参数。 ... [详细]

蜡笔小新 2023-12-09 07:37:04
scroll
mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决

web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条，因为它主要用途是设置类似于qq界面的那种格 ... [详细]

蜡笔小新 2023-10-17 20:40:03
overflow
CSS中的包裹性

之前一直都知道css中的部分元素具有包裹性，今天写博客的时候正好也遇到了一个，所以想总结一下，有错误的地方欢迎指出来。什么是包裹性？包裹性就是父元素的宽度会收缩到和内部元素宽度一样 ... [详细]

蜡笔小新 2023-10-17 20:09:31
overflow
jvm系列 (一)jvm内存区域与溢出

jvm内存区域与溢出为什么学习jvm木板原理，最短的一块板决定一个水的深度，当一个系统垃圾收集成为瓶颈的时候，那么就需要你对jvm的了解掌握。当一个系统出现内存溢出，内存泄露的时候 ... [详细]

蜡笔小新 2023-10-17 11:17:11
json
mintui中的下拉加载，可以一直加载数据，怎么处理呢？

html结构 ... [详细]

蜡笔小新 2023-10-17 10:44:03
scroll
DOM事件大全

1.事件：js与html的交互就是通过事件的，观察者模式2.事件流：从页面中接收事件的顺序IE：:事件冒泡流，事件冒泡，事件从最具体的元素接收，然后逐级向上传播，主流浏览器都支持N ... [详细]

蜡笔小新 2023-10-16 14:18:49
css
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
webkit
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
json
ava.lang.Class.getDeclaredMethod()方法

java.lang.Class.getDeclaredMethod()方法java.lang.Class.getDeclaredMethod()方法用法实例教程-方法返回一个Met ... [详细]

蜡笔小新 2023-10-17 06:32:19

key920721

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章