优雅而酷炫的自定义CSS滚动条

本文中，我们将深入了解滚动条的世界。我知道，这听起来不太迷人，但相信我，精心设计的页面与匹配的滚动条齐头并进。老式的镀铬滚动条只是不适合那么多。

我们将研究滚动条的细节，然后看看一些很酷的例子。

滚动条的组成部分

要设置滚动条的样式，您需要熟悉滚动条的解剖结构。请看这张图：

这里要记住的两个主要组成部分是：

scrollbar track是滚动条下方的背景。
scrollbar humb是用户单击和拖动的部分。

我们可以使用供应商前缀：：-webkit-scrollbar 选择器更改完整滚动条的属性。我们可以给滚动条一个固定的宽度、背景颜色、圆角......很多事情！如果我们自定义页面的主滚动条，那么我们可以直接在 HTML 元素上使用：：-webkit-scrollbar：

html::-webkit-scrollbar {
  /* Style away! */
}

如果我们自定义一个滚动框，这是溢出的结果：滚动，那么我们可以在该元素上使用：：-webkit-scrollbar：

.element::-webkit-scrollbar {
  /* Style away! */
}

下面是一个快速示例，它设置 HTML 元素滚动条的样式，使其宽，背景为红色：

如果我们只想更改滚动条的thumb或track怎么办？你猜对了——我们分别为这两个元素提供了特殊的前缀伪元素：：：-webkit-scrollbar-thumb 和：：-webkit-scrollbar-track。以下是我们将所有这些东西放在一起时可能实现的想法：

向您展示三个度的自定义滚动条样式，然后打开一个从网络上提取示例的大型展示，以获取灵感。

简单而优雅的滚动条

自定义滚动条仍然可以是最小的。我整理了一组示例，这些示例巧妙地改变了外观，无论是对拇指或轨道进行轻微的颜色更改，还是对背景进行一些浅色造型。

如您所见，在滚动条样式方面，我们不必发疯。有时，只需进行细微的更改即可通过与整体主题匹配的滚动条来增强整体用户体验.

html::-webkit-scrollbar{
  width: 50px;
  background:red;
}

如果我们只想更改滚动条的拇指或轨道怎么办？你猜对了——我们分别为这两个元素提供了特殊的前缀伪元素：：：-webkit-scrollbar-thumb 和：：-webkit-scrollbar-track。以下是我们将所有这些东西放在一起时可能实现的想法：

html::-webkit-scrollbar {
  width: 30px;
}
 
html::-webkit-scrollbar-track {
  background: black;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
html::-webkit-scrollbar-thumb {
  background: red;
  border: 3px solid blue;
}

向您展示三个度的自定义滚动条样式，然后打开一个从网络上提取示例的大型展示，以获取灵感。

简单而优雅的滚动条

.container {
            display: flex;
            margin: 50px;
            column-gap: 20px;
        }
        
        .scrollbar {
            height: 300px;
            width: 50%;
            overflow: auto;
            padding: 0 10px;
        }
        /*       ScrollBar 1        */
        
        #scrollbar1::-webkit-scrollbar {
            width: 10px;
        }
        
        #scrollbar1::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar1::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #d55959;
        }
        /*       ScrollBar 2        */
        
        #scrollbar2::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar2::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        }
        
        #scrollbar2::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #363636;
        }
        /*        ScrollBar 3    */
        
        #scrollbar3::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar3::-webkit-scrollbar-track {
            background-color: #e7e7e7;
            border: 1px solid #cacaca;
        }
        
        #scrollbar3::-webkit-scrollbar-thumb {
            background-color: #060b9a;
        }
        /*        ScrollBar 4    */
        
        #scrollbar4::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar4::-webkit-scrollbar-track {
            background-color: transparent;
            border: 1.5px solid #7e7e7e;
            border-radius: 8px;
        }
        
        #scrollbar4::-webkit-scrollbar-thumb {
            background-color: #f1f1f1;
            border: 2px solid #616161;
            border-radius: 8px;
        }
        /*        ScrollBar 5    */
        
        #scrollbar5::-webkit-scrollbar {
            background-color: #000;
            width: 12px;
            border-radius: 10px;
        }
        
        #scrollbar5::-webkit-scrollbar-track {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
        }
        
        #scrollbar5::-webkit-scrollbar-thumb {
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
            border-radius: 10px;
        }
        /*       ScrollBar 6        */
        
        #scrollbar6::-webkit-scrollbar {
            width: 12px;
        }
        
        #scrollbar6::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #95a5a6;
            border: 1px solid #cacaca;
        }
        
        #scrollbar6::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #2c3e50;
        }

如您所见，在滚动条样式方面，我们不必发疯。有时，只需进行细微的更改即可通过与整体主题匹配的滚动条来增强整体用户体验。

看个锚点定位的例子

发现页面唰的一些就到顶部了，快到我们懵逼了。。。

开始解决

scroll-behavior

CSS属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

scroll-behavior:smooth 写在滚动容器元素上，可以让容器的滚动变得平滑。

在网页默认滚动是在<html>标签上，移动端大多数在<body>标签上。

我们可以这样加：

html, 
body { scroll-behavior:smooth; }

加了以后的效果如下：

这是录制的GIF图，效果没那么好。大家可以动手试一下，滑动体验非常不错。

缺点

兼容性不够好

当然我们可以通过js来做个类似

Element.scrollIntoView() 方法

DOM元素的scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，通过触发滚动容器的定位实现。

DOM元素的scrollIntoView()方法是原生JS 兼容到IE6，兼容性非常好。

参数如下

{
 behavior: "auto" | "instant" | "smooth", // 默认 auto
 block: "start" | "center" | "end" | "nearest", // 默认 center
 inline: "start" | "center" | "end" | "nearest", // 默认 nearest
}

解释一下这三个参数：

behavior 表示滚动方式。auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth 表示直接滚到底和使用平滑滚动。
block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是竖直方向。start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是水平方向。其值与 block 类似。

用法：

html:

<div class="wrap">
 <div onClick="onScrollIntoView()">点击让黑色块到顶部</div>
 <ul class="body">
 <li>1</li>
 <li>2</li>
 <li id="box">我是黑色</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>

js:

function onScrollIntoView () {
 var element=document.getElementById("box");
 element.scrollIntoView({behavior: "smooth"});
}

效果：

这回大家再也不用害怕做锚点定位啦。

最后我们在说一个关于页面滚动问题吧，那就是 返回顶部 功能实现

返回顶部功能实现

我们常用定时器 setInterval 来不断减去高度。

如：当前距离顶部 1000，我们每10毫秒减50，

var timer=setInterval(function() { // 定时器 每10毫秒执行一次
 // 顶部距离 document.body.scrollTop=1000 
 var speed=50 // 返回顶部速度 
 document.body.scrollTop=document.body.scrollTop - speed
 if (document.body.scrollTop===0) { // 返回到达顶部后， 销毁定时器
 clearInterval(timer)
 }
}, 10)

效果：

大家会发现，页面返回是滚动起来很干。没10毫秒减50. 很平均，在交互上效果并不好。

借鉴上面 scroll-behavior:smooth 的交互效果。缓动的返回顶部。

改一下计算方式：1000/2=500, 500/2=250, 250/2=...... 这样滑动起来是不是就平滑了呢？

换算成公式：开始位置=开始位置 + (结束位置 - 开始位置) / 速度

document.body.scrollTop=1000 + (0 - 1000) / 2

公式太烦了还是上代码吧：

var onTop=function (a, b, c, d) {
 if (a==b || typeof a !='number') {
 return
 }
 b=b || 0
 c=c || 2
 
 var speed=function () {
 a=a + (b - b) / c
 
 if (a < 1) {
 d(b, true)
 return
 }
 d(a, false)
 requestAnimationFrame(speed)
 }
 speed()
}

a 开始位置
b 结束位置
c 速度
d 位置回调，d(当前的位置值, 否动画结束)

调用：

var target=document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
 target.scrollTop=value
})

效果：

Ps: gif录制效果不好，大家可以动手写一下DEMO

装GoFullPage之类的截图插件也可以实现滚动截图，不过插件的截图效率肯定不如浏览器自带的工具，而且安装插件对于浏览器的内存占用，网页加载等多少会有点影响。

那么不安装插件，Chrome浏览器如何实现滚动截图？

以前Chrome网页滚动截图可以用开发者工具里的Capture full size screenshot命令，而现在这个命令搜不到了。

实际上新版本的Chrome把这个截图命令移到了可视化界面中，并且现在可以设置快捷键，使用起来比之前更方便。

首先还是打开开发者工具，然后找到“设置”；

在设置窗口的左侧导航最下边找到“快捷键”，右侧往下翻，找到“屏幕截图”，这里就可以对4中截图命令设置快捷键。

使用的时候，还是要先打开开发者工具这个窗口，然后用设置好的快捷键快速实现网页滚动截图。

Chrome浏览器开发者工具是一款非常强大且易于使用的前端开发工具。其优点包括但不限于以下几点：

实时编辑：可以直接在浏览器中编辑HTML、CSS和JavaScript代码，并且页面可以实时更新。

调试JavaScript代码：提供了丰富的调试工具，比如断点、监控变量、堆栈跟踪等，方便我们快速定位和解决JavaScript代码问题。

查看元素：您可以轻松查看元素的样式、盒模型、事件等。您可以快速了解页面结构，还可以修改样式以达到设计效果。

网络分析：提供网络面板，方便查看网络请求、响应状态码、传输大小等信息，以及网络请求的时间线图表。

性能分析：提供性能面板，可以帮助我们分析页面加载性能、资源优化建议等，帮助我们提高页面性能。

在线咨询

上一篇：用户界面框架jQuery EasyUI示例大全之Da
下一篇：js的基础知识必备

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

优雅而酷炫的自定义CSS滚动条

滚动条的组成部分

简单而优雅的滚动条

简单而优雅的滚动条

scroll-behavior

缺点

Element.scrollIntoView() 方法

返回顶部 功能实现

您的项目需求

返回顶部功能实现