纯CSS Edge滚动条（高仿），使用::-webkit-scrollbar

最新推荐文章于 2024-05-20 14:58:04 发布
最新推荐文章于 2024-05-20 14:58:04 发布
阅读量869 收藏 3
点赞数 3
文章标签： css edge css3 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61093435/article/details/132341233
版权

复制样式

首先提供复制，效果在更下面。（未登录用户可以右键使用Edge的 网页捕获 之前名为 Web选择 来复制）

不建议直接使用此css代码，应该在前面指定 特定的元素 ，例如 ::-webkit-scrollbar变成.classname::-webkit-scrollbar否则可能会与其他 滚动条 产生意想不到的冲突。

::-webkit-scrollbar {
    width: 17px;
}

::-webkit-scrollbar-track {
    background-color: white;
}

::-webkit-scrollbar-thumb {
    background-color: #8b8b8b;
    /*border-radius: 4px;*/
    height: 24px;
    width: 24px;
    border-style: dashed;
    border-color: transparent;
    border-width: 4px;
    border-radius: 10px;
    background-clip: padding-box;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
}


::-webkit-scrollbar-thumb:hover {
    background-color: #606060;
}

/* 自定义滑动按钮 */
::-webkit-scrollbar-button:single-button {
  background-color: white;
  display: block;
  background-size: 10px;
  background-repeat: no-repeat;
}
/* 上箭头 */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  height: 17px;
  width: 17px;
  background-position: center 4px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" transform="scale(0.9)" viewBox="-2 -4 24 24"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}

/* 下箭头 */
::-webkit-scrollbar-button:single-button:vertical:increment {
  height: 17px;
  width: 17px;
  background-position: center 4px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" transform="scale(0.9)" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

/* 左箭头 */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  /* border-radius: 5px 0 0 5px; */
  height: 17px;
  width: 17px;
  background-position: 3px 3px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}


::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" transform="scale(0.9)" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

/* 右箭头 */
::-webkit-scrollbar-button:single-button:horizontal:increment {
  /*border-radius: 0 5px 5px 0;*/
  height: 17px;
  width: 17px;
  background-position: 3px 3px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" transform="scale(0.9)" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}

实现效果

在Edge中的效果。

 上面那个是高仿。下面那个是原版。

在Chrome中的效果。

上面那个是高仿。下面那个是原版。

预览效果

https://codepen.io/gxlydlyf/pen/dywbwLoicon-default.png?t=N6B9https://codepen.io/gxlydlyf/pen/dywbwLo

修改样式

以下代码不保证是最新修改

指定整个样式

::-webkit-scrollbar {
        width: 17px;
}

滚动条轨道 

::-webkit-scrollbar-track {
        background-color: white;
}

滚动条滑块

::-webkit-scrollbar-thumb {
        background-color: #8b8b8b;
        height: 24px;
        width: 24px;
        border-style: dashed;
        border-color: transparent;
        border-width: 4px;
        border-radius: 10px;
        background-clip: padding-box;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
}

 滚动条滑块悬浮样式

::-webkit-scrollbar-thumb:hover {
        background-color: #606060;
}

自定义箭头按钮 

::-webkit-scrollbar-button:single-button {
        background-color: white;
        display: block;
        background-size: 10px;
        background-repeat: no-repeat;
}

上箭头

background-image为箭头图标。

基础样式

取消border-radius的注释，设置按钮圆角。

::-webkit-scrollbar-button:single-button:vertical:decrement {

        /*border-radius: 5px 5px 0 0;*/
        height: 17px;
        width: 17px;
        background-position: center 4px;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}

悬浮样式 

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}

点击箭头时未释放鼠标样式

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" transform="scale(0.9)" viewBox="-2 -4 24 24"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fsvg%3E');
}

下箭头

background-image为箭头图标。

基础样式

取消border-radius的注释，设置按钮圆角。

::-webkit-scrollbar-button:single-button:vertical:increment {

        /*border-radius: 0 0 5px 5px;*/
        height: 17px;
        width: 17px;
        background-position: center 4px;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

悬浮样式 

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

点击箭头时未释放鼠标样式

::-webkit-scrollbar-button:single-button:vertical:increment:active {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" transform="scale(0.9)" viewBox="-2 -4 24 24"%3E%3Cg transform="rotate(180 10 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

 

左箭头

background-image为箭头图标。

基础样式

取消border-radius的注释，设置按钮圆角。

::-webkit-scrollbar-button:single-button:horizontal:decrement {
        /* border-radius: 5px 0 0 5px; */
        height: 17px;
        width: 17px;
        background-position: 3px 3px;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

悬浮样式 

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

点击箭头时未释放鼠标样式

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" transform="scale(0.9)" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(-90 10 10)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

右箭头

background-image为箭头图标。

基础样式

取消border-radius的注释，设置按钮圆角。

::-webkit-scrollbar-button:single-button:horizontal:increment {
        /*border-radius: 0 5px 5px 0;*/
        height: 17px;
        width: 17px;
        background-position: 3px 3px;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%238b8b8b" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}

悬浮样式 

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}

点击箭头时未释放鼠标样式

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" transform="scale(0.9)" viewBox="-4 -2 24 24"%3E%3Cg transform="rotate(90 8 8)"%3E%3Cpath fill="%23606060" d="m12.547 1.621l6.095 9.794A3 3 0 0 1 16.095 16H3.905a3 3 0 0 1-2.547-4.585L7.453 1.62a3 3 0 0 1 5.094 0z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E')
}

 

已知差异

差异很多，如有 建议 或 解决办法 可到评论区提供。

相同

1.上下都有 滚动箭头 。

2.滚动条 轨道 一样。

3.滚动条滑块 差不多 ，原版略微长一点。

4. 箭头 点击有缩放效果。

差异

1.当 滚动条滑块 移到最顶部或最底部的时候，依旧可以触发 箭头按钮 的悬浮和点击效果；在原版中，一旦 滚动条滑块 移到最顶部或最底部， 箭头按钮 的点击事件和悬浮事件都不会生效。

2. 箭头按钮的图标 与原版有微小的差异，原版的 稍微扁一点 和 宽一点；图标来源于Iconify Design: All popular icon sets, one framework.

问题

1.当在 手机端 访问网页时，箭头按钮 不会出现。

2.如果 在浏览器 使用 Ctrl++ 放大网页的时候，滚动条将会被跟着一起放大。

3.一些 浏览器 或 较旧版本 不支持此样式。

m0_61093435
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
浏览器页面滚动条美化（样式）
wang839305939的博客
06-11 4203
浏览器页面滚动条美化（样式） 最近测试反应我们的产品在浏览器中当页面宽高出现溢出的情况下页面滚动条太丑了！让我们美化一下！然后花了一点时间专研了一下关于滚动条样式的相关知识，今天就在这里和大家一起分享一下： 其实滚动条样式是由两部分构成，一是滚动槽，二就是滑块，其实我们可以把他理解成轨道和火车的关系就行了，浏览器默认的样式其实就像我们传统的绿皮火车，现在的高铁其实就像修改后的样式，改
css滚动条-webkit-scrollbar
栈木地
02-19 2914
介绍之前，先穿插一个小知识点，大神略过； 经常看见 在css属性前加上-webkit之类的代码，也就是兼容不同浏览器的代码； -webkit 兼容chrome（谷歌）、safari（MacOS端浏览器）； -moz 兼容firefox（火狐）； -ms 兼容ie； 为什么讲这个，因为：修改滚动条样式只有谷歌支持； 所以：以下css属性直接根据需求带走； ::-webkit-scr...
css-scrollbar-tutorial:制作自定义CSS滚动条的示例代码
04-28
css-scrollbar-tutorial 基本教程的代码，介绍了如何使用CSS设置自定义滚动条的样式
::webkit-scrollbar 滚动条的相关属性
最新发布
m0_63811812的博客
05-20 277
::webkit-scrollbar 滚动条的相关属性
CSS3自定义滚动条样式 -webkit-scrollbar
sweetyhyh的博客
04-20 2284
lang="en">     charset="UTF-8">   CSS3自定义滚动条     header   {   font-family: 'Lobster', cursive;   text-align: center;   font-size: 25px;  
CSS 伪类 ::-webkit-scrollbar 滚动条定义及使用
YDOOK
08-19 1757
::-webkit-scrollbar 只能在支持WebKit的浏览器中使用。常见的支持WebKit的浏览器有 谷歌的Chrome 与 苹果的Safari。 IE 浏览器暂时不支持。 国内的：360 极速浏览器可以使用。 使用方法： 选择器 :: ::-webkit-scrollbar { ... 属性定义 } ...
滚动条基本样式设置
神膘护体小月半的博客
12-26 7243
滚动条基本样式设置
滚动条如何设置样式和滚动条悬浮显示与隐藏
热门推荐
weixin_44784401的博客
04-13 1万+
滚动条如何设置样式和滚动条悬浮显示与隐藏
css3更改默认滚动条样式-webkit-scrollbar
yb305
09-14 537
浏览器自带的原始滚动条很不美观，在一些特殊需求中，我们需要对滚动条的样式单独设置，因此就出现了用-webkit-scrollbar来自定义滚动条的样式。。 首先 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 滚动条的组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，
关于 overflow 滚动条(滑动条)配置，简单使用的案例和案例代码
youyudehan的博客
01-19 1791
简单了解关于滚动条(滑动条)的样式配置，了解其配置的注意事项，完成实现简单的样式配置实例。
兼容edge、谷歌和火狐浏览器的滚动条样式纯css实现
weixin_45977607的博客
01-11 760
整个页面的多个块都可以使用这个自定义滚动条 *::-webkit-scrollbar { width: 3px; background-color: #eee; } *::-webkit-scrollbar-thumb { background-color: #c1c1c1; &:hover { background-color: #a8a8a8; } &:active { background-color: #787878; } } *
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
11-20
需要注意的是，这些CSS3的滚动条样式只在基于WebKit的浏览器（如Chrome、Safari）中有效，对于其他非WebKit浏览器（如Firefox、Edge），可能需要使用JavaScript库或浏览器特定的解决方案来实现兼容性。
tailwindcss-scrollbar:Tailwindcss插件来自定义浏览器滚动条
05-13
tailwindcss-滚动条Tailwindcss插件可自定义浏览器滚动条。安装 # Using npmnpm install -D @gradin/tailwindcss-scrollbar# Using Yarnyarn add -D @gradin/tailwindcss-scrollbar 然后将插件添加到tailwind.config...
tailwind-scrollbar:Tailwind CSS的滚动条插件
04-28
Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-scrollbar 或者npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中...
绿色滚动条 - 纯CSS3（来自ZIG）「Green Scroll Bar - Pure CSS3 (from ZIG)」-crx插件
03-15
zzllrr imager滚动条的原始CSS * / ::-webkit-scrollbar {background-color：white; 宽度：10px; 高度：10px; -webkit-box-shadow：2px 2px 6px rgba（0,0,0，.5）插入; } ::-webkit-scrollbar-thum {{border-...
webkit-scrollbar应用
qq_45944328的博客
07-05 1326
webkit-scrollbar应用
vue 设置和隐藏滚动条
淘气の小狼人的博客
12-02 3077
vue 设置和隐藏滚动条
主流的浏览器与其内核
青山不改，绿水长流。
09-21 3897
microsoft edge”是由微软开发的基于Chromium开源项目即其他开源软件的网页浏览器，该浏览器内置与windows10版本中，支持内置Cortana语音功能，内置了阅读器、笔记和分享功能。，它开源了浏览器的源码，也提供了很多插件，方便了用户的使用，支持Windows平台、Llnux平台和Mac平台。大部分国产的浏览器（qq浏览器，uc浏览器，猎豹浏览器，360浏览器）基本上是在IE浏览器的内核上进行的二次开发。现在国内市场上有许多双内核的浏览器，使用的是trident,webkit内核。
纯css修改浏览器scrollbar滚动条样式
weixin_34405354的博客
11-22 589
使用css修改浏览器滚动条样式 ::-webkit-scrollbar { width: .5rem; height: .5rem; background: hsla(0, 0%, 100%, 0.6); } ::-webkit-scrollbar-track { border-radius: 0; } ::-web...
css设置::-webkit-scrollbar
03-23
::-webkit-scrollbar 是一个用于自定义滚动条样式的伪元素选择器。它可以用来修改滚动条的外观，包括滚动条的宽度、颜色、背景等。 下面是一些常用的属性和值： 1. width/height：设置滚动条的宽度或高度。 2. background-color：设置滚动条的背景颜色。 3. border-radius：设置滚动条的边框圆角。 4. thumb：设置滚动条的滑块样式。 5. track：设置滚动条的轨道样式。 6. scrollbar-color：设置滚动条的颜色，包括滑块和轨道。 7. scrollbar-width：设置滚动条的宽度。 例如，下面的代码可以将滚动条的宽度设置为10px，背景颜色为灰色，滑块颜色为蓝色，轨道颜色为透明： ```css ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: blue; } ``` 注意，这些样式只在支持 WebKit 内核的浏览器中生效，如 Chrome、Safari 等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值