overflow产生的滚动条样式设置

article/2025/10/31 1:57:57

修改overflow产生的滚动条样式,主要可以通过如下三个伪元素设置:

1)-webkit-scrollbar:设置水平滚动条的高度,垂直滚动的宽度

2)-webkit-scrollbar-thumb:设置滚动条里面的滑块样式

3)-webkit-scrollbar-track:设置滚动条的轨道背景样式

4)本文默认使用chrome浏览器查看运行效果

方法/步骤

新建一个html文件叫做CssOverFlow.html(有html编辑工具的,就使用工具创建。没有工具的,可以先创建文本文件,再修改文件名即可)

自动草稿

【默认的overflow样式】代码如下(当外层高宽比内部内容高宽小,且设置了overflow:auto,就会有滚动条产生)

自动草稿

【默认的overflow样式】运行效果如下(横向和纵向都产生了滚动条)

自动草稿

【修改后overflow样式】代码如下(修改滚动条的宽度、背景色等样式)

自动草稿

【修改后overflow样式】运行效果如下(宽度减少了,背景色改变了)

自动草稿

只要水平方向上的滚动条,则隐藏垂直滚动条,使用代码:overflow-x:auto;overflow-y:hidden

自动草稿

只要垂直方向上的滚动条,则隐藏水平滚动条,使用代码:overflow-x:hidden;overflow-y:auto

自动草稿


http://chatgpt.dhexx.cn/article/AYPxn8Vh.shtml

相关文章

滚动条样式美化

之前做的项目中客户觉得滚动条的样式样式很丑,让我们优化一下。既然客户有要求那肯定得满足啊,但是因为我也没有做过,也不知道咋搞,于是就在网上搜索了一下。发现可以通过 ::-webkit-scrollbar CSS伪类选择器来美化滚动条样式。使…

Css实现漂亮的滚动条样式(转载)

转载于 https://www.jianshu.com/p/c2addb233acd 第一种 <div class"test test-1"><div class"scrollbar"></div> </div>.test {width : 50px;height : 200px;overflow: auto;float : left;margin : 5px;border : none;}.…

css修改滚动条样式

css自定义滚动条样式 自定义滚动条实例代码&#xff1a; 有时候觉得浏览器自带的滚动条&#xff0c;实在是太丑了&#xff0c;一点点内容超出比例&#xff0c;就是多大的一个滚动条就来了&#xff0c;实在是遭不住&#xff0c;所以我就动手了&#xff01;&#xff01;&#xff…

CSS-滚动条样式设置

注意&#xff1a;滚动条设置的width、height&#xff0c;分别是对应纵向滚动条 宽度、横向滚动条 高度&#xff0c;无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式&#xff0c;常用属性如下&#xff1a; 注意&#xff1a;滚动条设置的width、height&…

滚动条基本样式设置

::-webkit-scrollbar 系列属性 详细使用说明 ::-webkit-scrollbar注意&#xff1a;如果没有设置滚动溢出的相关属性&#xff0c;滚动条样式系列属性不会生效&#xff08;resize 除外&#xff09;。属性 ::-webkit-scrollbar 整个滚动条。::-webkit-scrollbar-button 滚动条上的…

修改滚动条样式

修改滚动条样式 如果给父元素固定了宽高&#xff0c;子元素设置overflow:auto时&#xff0c;就会出现滚动条&#xff0c;而浏览器默认的滚动条样式并不是很美观&#xff0c;如下图所示 为了让显示的滚动条更好看些&#xff0c;可以对滚动条样式进行设置&#xff0c;关键css代…

CSS设置滚动条样式

今天在写一个项目的时候遇到了&#xff0c;这样一个小难点 要设置一个类似于页面的滚动条&#xff0c;查阅了相关文档之后&#xff0c;我会了 一、我们可以使用overflow属性设置是否出现滚动条overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /只是x方向/ 或者…

修改webkit内核浏览器滚动条样式(修改element-ui table样式)

webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分&#xff0c;可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条两端的按钮 3. ::-webkit-scrollbar-track 外层轨道 4. ::-webkit-scrollbar-track-piece 内层滚动槽 5. ::-webkit-s…

css修改滚动条的样式

滚动条的默认样式是这样的&#xff1a; 大灰块做背景&#xff0c;内嵌小灰块做滚动距离的展示。 再加上贴边的宽度&#xff0c;对于内容本身就比较窄的区域来说&#xff0c;这种样式笨重感十足&#xff01; 单调且无趣&#xff01; 而像这种样式的滚动条就比较可以了。 滚动…

【CSS】滚动条样式详解

【只总结webkit的&#xff0c;IE与firefox暂不做记录】 呼出与关闭滚动条 1.如果是浏览器的滚动条&#xff0c;其依赖的是html标签&#xff0c;我们不需要设置&#xff0c;内容溢出会自动出现 /*对html标签的溢出样式隐藏即可*/ html {overflow-x:hidden; //隐藏水平滚动条o…

滚动条样式修改

前言 浏览器中的滚动条样式大家一定都不陌生&#xff0c;其样式并不好康。可能很多小伙伴还不知道&#xff0c;这个东东的样式也可以修改&#xff08;仅支持部分现代浏览器&#xff09;&#xff0c;本次就来带大家用 CSS 修改一下它的样式。 一、认识滚动条 首先我们先来简单…

Java中compareTo()方法比较字符串详解

中心&#xff1a;String 是字符串,它的比较用compareTo方法,它从第一位开始比较, 如果遇到不同的字符,则马上返回这两个字符的ascii值差值.返回值是int类型 1.当两个比较的字符串是英文且长度不等时&#xff0c; 1&#xff09;长度短的与长度长的字符一样&#xff0c;则返回的…

Comparable Comparator的区别

Comparable & Comparator接口都可以用来实现集合中元素的比较、排序&#xff0c;Comparator位于包java.util下&#xff0c; Comparable位于包java.lang下 Comparable接口将比较代码嵌入自身类中 Comparator在一个独立的类中实现比较。 像Integer、String等这些基本类型的JA…

Comparable接口和compareTo()函数

Comparable Comparable可以认为是一个内比较器&#xff0c;实现了Comparable接口的类有一个特点&#xff0c;就是这些类是可以和自己比较的&#xff0c;至于具体和另一个实现了Comparable接口的类如何比较&#xff0c;则依赖compareTo方法的实现&#xff0c;compareTo方法也被…

Compareable接口的compareTo方法详解

Compareable接口可以实现类中成员属性的排序方法。通过重写Compareable接口中的CompareTo方法实现自定义规则的排序。 针对Compareable接口的排序方式,将通过对学生类和测试类进行一个代码演示 一般情况下 一般情况下Compareable接口是实现自然排序,即依照对象的添加顺序进行…

关于比较CompareTo的用法

CompareTo的比较原理&#xff1a; 先读取出字符串的第一个“字母”进行比较&#xff0c;比较的方法是ascii码表的值&#xff08;字符所对应的十进制值&#xff09;&#xff0c;如果前面的大那么返回1&#xff0c;后面的大返回-1&#xff1b;此位置相同&#xff0c;继续比较下一…

Java compare方法和compareTo方法

1.compare 对于 public int compare(Object arg0, Object arg1)的理解 //数组排序 String[] str new String[5]; Arrays.sort(str, new Comparator<String>() {Overridepublic int compare(String o1, String o2) {// TODO Auto-generated method stubreturn 0;} }); …

compareTo比较大小

public class TestInteger {public static void main(String[] args){//比较大小Integer i1new Integer(3);Integer i2new Integer(5);System.out.println(i1.compareTo(i2));} }因为i1<i2&#xff0c;所以输出的是-1&#xff1b; compareTo() 方法用于将 Number 对象与方法…

Java之比较CompareTo的用法

CompareTo的比较原理&#xff1a; 先读取出字符串的第一个“字母”进行比较&#xff0c;比较的方法是ascii码表的值&#xff08;字符所对应的十进制值&#xff09;&#xff0c;如果前面的大那么返回1&#xff0c;后面的大返回-1&#xff1b;此位置相同&#xff0c;继续比较下一…

MFC修改AfxMessageBox对话框标题

AfxMessageBox的对话框标题默认为项目工程的名字&#xff0c;对话框一般是为了给用户提示相关信息&#xff0c;而软件名字一般都与项目工程名不一样&#xff0c;例如软件可能是中文名。 1. 在资源视图&#xff0c;在String Table没有AFX_IDS_APP_TITLE 2. 添加字符串“AFX_IDS…