LESS 技巧：定制滚动条样式

在前端开发中，我们经常需要自定义网页的滚动条样式，以使其更符合网站的设计风格。而在 LESS 中，我们可以使用一些技巧来实现这个效果。

1. 隐藏默认滚动条

首先，我们需要隐藏浏览器默认的滚动条。我们可以使用以下代码来实现：

::-webkit-scrollbar {
  display: none;
}

这段代码会隐藏所有浏览器的滚动条。但是，它只适用于 WebKit 内核的浏览器，如 Chrome 和 Safari。如果你需要支持其他浏览器，可以使用以下代码：

html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 11 */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }
}

这段代码会隐藏所有浏览器的滚动条。

2. 自定义滚动条样式

现在，我们已经隐藏了浏览器默认的滚动条，接下来就是自定义滚动条的样式。

我们可以使用以下代码来定义滚动条的样式：

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 10px;
}

这段代码会将滚动条的轨道背景色设置为 #f5f5f5，滚动条的滑块背景色设置为 #c1c1c1，并设置滑块的圆角为 10px。

如果你需要支持其他浏览器，可以使用以下代码：

-- -------------------- ---- -------
---- -
  ---------------- ------- -------- -- ------- --
  -------------------------- -
    ----------------- -------- -- ------- ------- ---- --
  -
  -------------------------- -
    ----------------- -------- -- ------- ------- ---- --
    -------------- ----- -- ------- ------- ---- --
  -
-
展开代码

这段代码会将滚动条的滑块背景色设置为 #c1c1c1，轨道背景色设置为 #f5f5f5，并设置滑块的圆角为 10px。

3. 自定义滚动条的大小

最后，我们可以使用以下代码来定义滚动条的大小：

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

这段代码会将滚动条的宽度和高度都设置为 10px。

如果你需要支持其他浏览器，可以使用以下代码：

html {
  scrollbar-width: 10px; /* Firefox */
  &::-webkit-scrollbar {
    width: 10px; /* Chrome, Safari, Edge */
    height: 10px; /* Chrome, Safari, Edge */
  }
}

这段代码会将滚动条的宽度和高度都设置为 10px。

总结

在 LESS 中，我们可以使用以上技巧来自定义滚动条的样式和大小，使其更符合网站的设计风格。当然，这些技巧也可以应用于其他 CSS 预处理器中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65149ba495b1f8cacdd01f43