1 简介 从 Chrome 版本 2 开始，可以使用 ::-webkit-scrollbar-* 伪元素设置滚动条的样式。...此方法在 Chrome 和 Safari 中都很有效，但 CSS 工作组从未标准化。...从 Chrome 121 开始，这些属性受支持。 2 滚动条入门指南 2.1 滚动条剖析 滚动条至少由一个轨迹和一个滑块组成。滑道是拇指可以移动的区域。轨迹表示整个滚动距离。...不过，将鼠标悬停在滚动条上时，系统会显示航迹。...不过，此元素仍然可滚动。 无法使用 （例如 16px）作为 scrollbar-width 的值。
CSS滚动条选择器 ::-webkit-scrollbar — 整个滚动条 ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头) ::-webkit-scrollbar-thumb...— 滚动条上的滚动滑块 ::-webkit-scrollbar-track — 滚动条轨道 ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner...— 当同时有垂直滚动条和水平滚动条时交汇的部分 ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮) ::-webkit-scrollbar...仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用 修改滚动条样式 .container { width: 100px; height: 100px...; overflow: auto; } /* 整个滚动条 */ .container::-webkit-scrollbar { width : 8px; } /* 滚动条里面滑块 */ .
CSS媒体查询来创建响应式布局，使你的网站在不同设备上都能呈现出良好的用户体验。...CSS的scroll-behavior属性，你可以为网页添加平滑滚动效果，使页面在滚动时更加流畅和舒适。.../* Webkit浏览器（Chrome等） */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background-color...{ background-color: #555; } 文本溢出省略号：当文本内容超过容器宽度时，可以使用CSS的text-overflow属性来实现省略号的效果，以便更好地处理长文本。...transition属性和:hover伪类，可以为元素添加边框动画效果，使其在鼠标悬停时产生过渡效果。
-webkit-text-size-adjust: 100% 解释：在 Chrome 浏览器中只能设置大于或等于 12px 的字体大小，当设置了小于 12px 的字体大小时，浏览器按照 12px 的字体大小渲染字体...-webkit-overflow-scrolling: touch 解释：-webkit-overflow-scrolling属性用于控制元素在移动设备上是否使用滚动回弹效果，其中touch表示使用具有回弹效果的滚动...相对于当前对象内文本的字体尺寸 当em作为font-size的单位时，表示相对于父元素的font-size的倍数 例如：父元素的font-size的值为 16px 如果子元素的font-size: 2em...，则子元素的字体大小为 16px X 2em = 32px 当em作为其他属性单位时，代表自身字体大小的倍数 例如：一个元素的font-size: 16px 如果该元素的line-height: 2em...自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条
一：webkit 下CSS设置滚动条 主要有下面7个属性： ::-webkit-scrollbar 滚动条整体，可以设置宽度等① ::-webkit-scrollbar-button 滚动条两端的按钮...对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个 single-button 。...:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。...和 Safari 浏览器： ::-webkit-scrollbar { display: none; /* Chrome Safari */ } 注意：当要隐藏滚动条的时候，最好将 overflow...示例： 我们使用上面的CSS属性以及溢出实现下面一个实例——隐藏水平滚动条，同时允许垂直滚动条： .scrollbar::-webkit-scrollbar { display: none; /*
1 基础知识 1.1 Webkit内核的css滚动条选择器 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 属性： ::-webkit-scrollbar — 整个滚动条...滚动条上的按钮 (上下箭头) ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner — 边角，即当同时有垂直滚动条和水平滚动条时交汇的部分...::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮) 注意： (1)浏览器的支持情况： ::-webkit-scrollbar 仅仅在支持Webkit...的浏览器 (Chrome, Safari)可以使用。...> 实现效果： scrollbar.png 说明： (1)滚动条两端的按钮使用的图片，四个角分别使用了四张图片; (2).scolltable实现了水平垂直居中的效果，具体方法是：使用绝对对位，将元素的定点定位到
如何隐藏滚动条，同时仍然可以在任何元素上滚动？ 首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。...时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。...属性定义滚动条样式： -ms-overflow-style: none; /* IE 10+ */ Chrome和Safari浏览器 对于Chrome和Safari浏览器，我们必须使用CSS滚动条选择器...，然后使用display：none隐藏它： ::-webkit-scrollbar { display: none; /* Chrome Safari */ } 注意：当你要隐藏滚动条的时候，最好将...示例 我们使用上面的CSS属性以及溢出实现下面一个实例——隐藏水平滚动条，同时允许垂直滚动条： .demo::-webkit-scrollbar { display: none; /* Chrome
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。...这个值是我手动调试得来的。在chrome和IE没发现问题。...方法2：使用三个容器包围起来，不需要计算滚动条的宽度 该代码最早是在Microsoft博客上看到的，跟我上面的思路差不多，只不过人家里面又加多了一个盒子，将内容限制在盒子里面了。...{ display: none; } 演示 方法3：css隐藏滚动条 同时该文章还分享了一种通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。...那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3自定义webkit滚动条样式 chrome 和Safari .element::-webkit-scrollbar
01 禁用用户选中一个元素（element）的文本 使用属性user-select，并且将它的值设置为none，我们可以将一个元素的文本设置为不能被用户选中。...当你不想一个元素的原始内容被复制时，可以使用这个属性。 ?...当你使用这个属性时，注意使用良好的颜色对比度组合。 ?...要实现这个目的，你必须为不同的浏览器，准备不同的代码： /* Hide scrollbar for Chrome, Safari, and Opera */ html::-webkit-scrollbar...，那么你需要确保提供上/下按钮和其他方便的导航选项。
Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。...要知道，在此前，虽然有 ::-webkit-scrollbar 规范可以控制滚动条，可是，::-webkit-scrollbar 是非标准特性，在 MDN 文档中都明确了不应该在生产环境使用它。...本文，我们就将一起学习看看这两个属性的使用。 scrollbar-color 设置滚动条颜色 顾名思义，scrollbar-color 就是用于设置滚动条颜色的。...滑块（thumb）是指滚动条通常漂浮在轨道的顶部上的移动部分。...scrollbar-width: thin：系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度 scrollbar-width: none：不显示滚动条，但是该元素依然可以滚动 简单示意图如下： 完整的
自定义滚动条设计 拥有一个自定义的滚动条曾经是webkit的专利，所以Firefox和IE被排除在游戏之外。我们有一种新的语法，只在Firefox中使用，当它被完全支持时，将使我们的工作更容易。...你希望样式是通用的，对网站上的所有滚动条都有效吗？还是你只想让它用于特定的部分？ 使用旧的语法，我们可以编写选择器，而不必将它们附加到元素上，它们将应用于所有可滚动的元素。...我注意到的是，如果你想要一个通用的样式，它应该被应用于html>元素，而不是。...{ scrollbar-color: #5749d2; } 需要时显示滚动条 创建一个可滚动的元素是可以通过给overflow属性添加一个除visible以外的值。...建议使用auto关键字，因为它只在内容超过其容器时才会显示滚动条。
滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button...两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 简洁版 这里就不贴出详细代码了，demo里面可以通过查看源码寻找具体样式的设置。...那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“...两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。 webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。...{ /*当焦点不在当前区域滑块的状态*/ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /*当鼠标在水平滚动条下面的按钮上的状态
回想当年，你可以通过在可滚动的元素（例如 ）上使用非标准的 CSS 属性（例如 scrollbar-base-color 之类）来 自定义 IE(5.5) 浏览器滚动条样式，并且可以实现...最近，自定义滚动条又回来了，不过是在 Webkit 内核中。相比之前，这次的属性名字加了供应商前缀（例如 ::-webkit-scrollbar）并且使用了 "Shadow DOM"。...David Hyatt 在 2009 年就写了一篇 博文 并且把几乎你期待的所有滚动条样式的组合都整合成了一个范例页面。 干货 不同的部件 下面是一些伪元素以及它们实际对应的滚动条的部件。...我们打算把它扩展至所有内容并推动它成为一个新的标准伪类。） 组合使用 上面介绍的伪元素和伪类选择器可以组合使用。...这里有一点特别好的是，滚动条是在 body 元素上的，所以滚动条的并不是像常见的那样贴在顶部、底部和浏览器窗口的右侧。
创建带有导航项目的导航栏为了创建导航栏，我们将使用HTML nav元素。...在本节中，我们将专注于防止侧边栏在滚动主要内容时移动。我们希望将侧边栏样式设置为固定位置，以便主体可以自行滚动而不带上侧边栏。...让我们继续下一节，我们将讨论如何设置滚动条的样式。自定义滚动条样式您希望为网站的滚动条设置样式的原因之一是为了在整个网页上实现颜色协调。您可能希望将在网站上使用的颜色数量保持在一组最小值。...在样式滚动条时，我们可以为以下属性设置所需的值：width - 垂直滚动条的厚度height - 水平滚动条的厚度scrollbar-thumb的背景颜色 - 随着滚动而来回移动的对象scrollbar-track...在大多数情况下，您可能希望在整个网站的所有垂直和水平滚动条上保持一致的样式。
可以使用 CSS 的 ::-webkit-scrollbar 伪元素来自定义 Webkit 内核的浏览器（例如 Chrome、Safari）中的滚动条样式。...该伪元素可以用来设置滚动条的宽度、高度、背景色、圆角、滑块样式等属性。...以下是一个示例代码，演示如何自定义滚动条的样式： /* 定义滚动条的宽度、高度和背景色 */ ::-webkit-scrollbar { width: 10px; height: 10px;...: 5px; } /* 定义滚动条滑块在 hover 状态下的样式 */ ::-webkit-scrollbar-thumb:hover { background-color: #999; } 我们首先定义了滚动条的宽度...接下来，我们定义了滚动条的边框和圆角，最后定义了滑块在 hover 状态下的样式。
在制作页面时，经常会遇到需要自定义一些标签的默认行为(如：input的占位符等)，但这些默认的设置的css一般比较难记住,所以有必要自己做一下记录。下面是我经常用到的一些重设默认行为的css。...如 -webkit- )； firefox的 placeholder 的前面没有 input- ； firefox与chrome都是 :: 两个冒号，而IE则是一个 : ; 低版本的浏览器与新版本浏览器可能写法不同...3、input[type=number]右边的spinners nput[type=number] 通常用在移动端设备上，浏览器会识别number输入类型，然后改变数字键盘来适应它。...webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 4、-webkit-tap-highlight-color 在移动端浏览器上...有时候需要把滚动条去掉，特别是页面中出现几条滚动条的时候： ::-webkit-scrollbar { width: 0; }
可以参照 CSS滚动条选择器设置滚动条的样式，如下。 以下伪元素选择器可以修改 webkit 浏览器的滚动条样式： ::-webkit-scrollbar 整个滚动条....::-webkit-scrollbar-button 滚动条上的按钮（上下箭头） ::-webkit-scrollbar-thumb 滚动条上的滚动滑块 ::-webkit-scrollbar-track...滚动条轨道 ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分...::-webkit-resizer 某些元素的corner部分的部分样式（如：textarea的可拖动按钮） 语法： ::-webkit-scrollbar { styles here } 例子： 直接隐藏滚动条...如需对全部列应用样式，则可以使用 标签，这样就不需要对各个单元和各行重复设置样式了。 注意：只能在 table 或 colgroup 元素中使用 标签。
自定义 overflow 的滚动条 1. overflow 属性介绍 ---- css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。...当元素框中的内容溢出时，无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 ---- 值 描述 visible 默认值。...内容不会被修剪，溢出部分会呈现在元素框之外 hidden 内容被修剪，溢出部分不可见 scroll 内容被修剪，无论是否溢出滚动条都会占据空间 auto 当内容溢出时会被修剪且出现滚动条，没有溢出时不显示滚动条...: 可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式 选择器 描述 ::-webkit-scrollbar 整个滚动条 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分...::-webkit-scrollbar { width: 4px; height: 7px; } /* 当同时有垂直滚动条和水平滚动条时交汇的部分 */ .container::-webkit-scrollbar-corner
div::-webkit-scrollbar { display: none; } div::-webkit-scrollbar 滚动条整体部分 div::-webkit-scrollbar-thumb...滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条 div::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb div::-webkit-scrollbar-button...边角，即两个滚动条的交汇处 div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大...ios 手机在使用 audio 或者 video 播放的时候，个别机型无法实现自动播放，可使用下面的代码 hack。...我也忘记我在什么情况下用到过了，后面想起来再补吧。 11.calc 这是一个 css 属性，我一般称之为 css 表达式。可以计算 css 的值。最有趣的是他可以计算不同单位的差值。
我们在CSS布局时，是按照设计师的效果来开发的，但是实际的网页内容是动态的，网页上的内容是可以改变的，如：文字数量，图片尺寸、窗口大小等，再加上用户的一些意想不到的行为和运行环境，从而造成CSS布局的效果并没有按照我们预期的效果显示...当内容溢出出现滚动条时，因为滚动条要占据一部分空间，则会造成文字占据的空间变窄，因而会造成重排。我们可以元素添加scrollbar-gutter:stable;来避免这个问题。... 7、场景七：锁定滚动链我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。...在子元素上应用overscroll-behavior: contain就可以禁止掉这一行为。...当最后一行只有1个子元素时，他会默认靠左，不用处理当最后一行子元素正好时，我们就不用关心这个问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
