前端开发中，我们经常需要对网页元素进行美化，而滚动条是经常使用的元素之一。一般情况下，浏览器默认提供的滚动条样式都比较简单，通过 LESS 可以很方便地实现自定义滚动条的美化效果。
LESS 是什么
LESS 是一种 CSS 预处理器，它可以在 CSS 的基础上扩展出许多新的特性和语法，方便我们快速编写复杂的样式。LESS 可以将样式文件编译为 CSS 文件，在前端开发中广泛应用。
实现滚动条美化的步骤
1. 准备工作
在开始之前，我们需要准备好一个 HTML 页面，并在页面中定义了滚动元素的样式，例如：
<div class="demo"> <p>这里是内容</p> </div>
.demo {
height: 400px;
overflow: auto;
}2. 定义滚动条样式
在 LESS 中，我们可以使用 ::-webkit-scrollbar 伪元素来定义滚动条的样式。例如：
-- -------------------- ---- -------
----- -
-------------------- -
------ -----
------- -----
-
-------------------------- -
----------- -----
-------------- ----
-
-------------------------- -
----------- --------
-------------- ----
-
-上面的代码中，我们通过 & 符号将样式绑定到 .demo 元素上。::-webkit-scrollbar 定义了滚动条的宽度和高度，::-webkit-scrollbar-thumb 定义了滚动条的滑块样式，::-webkit-scrollbar-track 定义了滚动条的轨道样式。
3. 实现滚动条美化细节
在定义滚动条样式的基础上，我们还可以通过 LESS 来实现滚动条的美化效果，例如：
-- -------------------- ---- -------
----- -
-------------------- -
------ -----
------- -----
-
-------------------------- -
----------- -----
-------------- ----
-
-------------------------- -
----------- --------
-------------- ----
----------- ----- - - --- ------- -- -- -----
-
--------------------------- -
----------- --------
-
-------------------------------- -
----------- -----
-
-------------------------------- -
----------- --------
-
--------------------------------- -
----------------- -----
-
-上述代码中，我们通过 box-shadow 属性为滚动条轨道添加了内阴影效果，使得滚动条显得更加立体。并通过 :hover 和 :active 伪类来实现鼠标悬停和点击效果的改变，使得滚动条的使用更加友好。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
------ ----------------
----- -
------- ------
--------- -----
-------------------- -
------ -----
------- -----
-
-------------------------- -
----------- -----
-------------- ----
-
-------------------------- -
----------- --------
-------------- ----
----------- ----- - - --- ------- -- -- -----
-
--------------------------- -
----------- --------
-
-------------------------------- -
----------- -----
-
-------------------------------- -
----------- --------
-
--------------------------------- -
----------------- -----
-
-
--------
-------
------
---- -------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------
-------
-------总结
使用 LESS 实现滚动条美化非常简单，只需要定义好滚动条的样式和细节，即可得到漂亮的滚动条效果。在使用过程中，我们还可以通过 LESS 的许多特性和语法来实现更加细致、复杂的滚动条样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464a013968c7c53b0581b4f