CSS如何隐藏滚动条并保留功能 自定义滚动条样式

CSS如何隐藏滚动条并保留功能 自定义滚动条样式

滚动条在前端开发中是让人又爱又恨，可是没有它不行，但是它好像有点不好看。这时候就需要去自定义滚动条样式。

让我们一起来看看看如何隐藏滚动条并保留功能和自定义滚动条样式吧！！ 最后希望可以点个关注，以后会持续更新前端知识，另外自己也新建了一个公众号，求一波关注！！！

1.如何隐藏滚动条 添加 overflow: hidden; 隐藏水平和垂直滚动条。

body {
  overflow: hidden; /* 隐藏滚动条 */
}

要仅隐藏垂直滚动条，或仅隐藏水平滚动条，请使用 overflow-y 或 overflow-x:

body {
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
}

注意 overflow: hidden 也会移除滚动条的功能。无法在页面内滚动。

2.隐藏滚动条但保留功能 要隐藏滚动条，但仍能保持滚动，可以使用以下代码：

/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
.example::-webkit-scrollbar {
  display: none;
}

/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Webkit 浏览器，例如 Chrome、Safari 和 Opera，支持非标准的 ::-webkit-scrollbar 伪元素，它允许我们修改外观 浏览器的滚动条。IE 和 Edge 支持 -ms-overflow-style: 属性，Firefox 支持 scrollbar-width 属性 ，它允许我们隐藏滚动条，但保留功能。

上面是关于隐藏滚动条的内容，那么如何始终显示滚动条呢？

1.如何强制/始终显示滚动条 添加overflow:scroll;来同时显示水平和垂直滚动条：

body {
  overflow: scroll; /* 显示滚动条 */
}

要只显示垂直滚动条，或只显示水平滚动条，请使用 overflow-y 或 overflow-x：

body {
  overflow-y: scroll; /* 显示垂直滚动条 */
  overflow-x: scroll; /* 显示水平滚动条 */
}

知道了如何隐藏和显示那么如何创建自定义滚动条呢？ Chrome、Edge、Safari 和 Opera 支持非标准的 ::-webkit-scrollbar 伪元素，它允许我们修改浏览器滚动条的外观。

以下示例创建了一个细（10 像素宽）滚动条，它具有灰色的轨道/条颜色和深灰色 (#888)

/* 宽度 */
::-webkit-scrollbar {
  width: 10px;
}

/* 跟踪 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 句柄 */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* 悬停处理 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
下面例子创建了一个带有盒子阴影的滚动条：


/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* 跟踪 */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* 句柄 */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

滚动条选择器：对于webkit浏览器，可以使用以下伪元素来自定义浏览器的滚动条： ::-webkit-scrollbar 滚动条。

::-webkit-scrollbar-button 滚动条上的按钮（向上和向下的箭头）。

::-webkit-scrollbar-thumb 可拖动的滚动手柄。

::-webkit-scrollbar-track滚动条的轨迹（进度条）。

::-webkit-scrollbar-track-piece 没有被手柄覆盖的轨道（进度条）。

::-webkit-scrollbar-corner 滚动条的底角，水平和垂直滚动条的交汇处。

::-webkit-resizer 出现在某些元素底角的可拖动调整大小手柄。

另外自己也新建了一个公众号，求一波关注！！！