html中设置滚动条的样式

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

一、效果图

    

二、css    

::-webkit-srollbar-track-piece{background:none;-webkit-border-radius:0;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#bbbbbb;-webkit-border-radius:4px;outline:0px solid #ffffff;ouline-offset:-2px;border:2px solid #ffffff;}
::-webkit-scrollbar-thumb:hover{height:50px;background-color:#999999;-webkit-border-radius:4px;}
::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:#bbbbbb;-webkit-border-radius:4px;outline:0px solid #ffffff;ouline-offset:-2px;border:2px solid #ffffff;}


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

相关文章

(css)滚动条样式

(css)滚动条样式 效果: /*滚动条整体样式*/ ::-webkit-scrollbar {width: 2px;/*高宽分别对应横竖滚动条的尺寸*/height: 10px; } ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;width: 2px;height: 60px;background: linear-gradient(0deg,…

vue修改滚动条样式的方法

这篇文章主要介绍了vue修改滚动条样式,首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。下面来看看文章内容的具体实现吧 目录 首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。 注意, ::-webkit-…

CSS自定义滚动条样式

CSS自定义滚动条样式 测试html内容 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&…

CSS 滚动条: 自定义滚动条样式

CSS 滚动条: 自定义滚动条样式 文章目录 CSS 滚动条: 自定义滚动条样式前言正文overflow & ::-webkit-scrollbar实际效果&#xff08;自定义滚动条、隐藏滚动条&#xff09; 结语其他资源参考连接完整代码示例 前言 本篇来介绍如何为自己的网页定制化自己的滚动条 正文 …

css如何修改滚动条样式

默认滚动条样式如下: 那如何修改呢?如下代码: <div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是…

浏览器自定义滚动条样式

当一段文本过长&#xff0c;使用overflow:auto属性后&#xff0c;这段文本所在区域将会出现滚动条。有时候&#xff0c;我们需要自定义浏览器的滚动条样式&#xff0c;可以使用css3的scrollbar-thumb属性来实现。 首先看一下这个属性的兼容性。 可见这个属性在pc端支持的并不…

overflow产生的滚动条样式设置

修改overflow产生的滚动条样式&#xff0c;主要可以通过如下三个伪元素设置&#xff1a; 1)-webkit-scrollbar&#xff1a;设置水平滚动条的高度&#xff0c;垂直滚动的宽度 2)-webkit-scrollbar-thumb&#xff1a;设置滚动条里面的滑块样式 3)-webkit-scrollbar-track&…

滚动条样式美化

之前做的项目中客户觉得滚动条的样式样式很丑&#xff0c;让我们优化一下。既然客户有要求那肯定得满足啊&#xff0c;但是因为我也没有做过&#xff0c;也不知道咋搞&#xff0c;于是就在网上搜索了一下。发现可以通过 ::-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…