CSS设置滚动条显示时机及样式

目录

一、背景

二、滚动条动态出现

2.1、默认滚动条

2.2、动态滚动条

2.3、滚动条样式

三、实际效果

一、背景

        首先，我们知道若子元素的内容高度超过父元素的高度时，超出的内容可以设置隐藏、显示或者是显示滚动条。有几种情况设置出现滚动条。

        第一种：直接在父元素的css样式中设置overflow-y: auto; 使内容出现滚动条，但是这样滚动条会一直显示，不太美观。

        第二章：在元素聚焦或鼠标移动到元素时显示滚动条，这种情况也有一个问题，就是动态出现的滚动条会挤兑子元素的内容，实际情况会造成子元素的内容跟着滚动条的出现而动态调整宽度的情况。

二、滚动条动态出现

2.1、默认滚动条

        基础的样式也很简单，其实就是在父元素的css样式中设置overflow-y: hidden; 默认滚动条隐藏，在父元素的伪类:hover 时修改overflow-y: auto; 如此滚动条就会在鼠标移动到父元素区域时，出现滚动条。

.messageView {
    flex: 1;
    width: 100%;
    height: 100%:
    scroll-behavior: smooth; /* 平滑滚动效果 */
    // 父元素默认隐藏滚动条
    overflow-y: hidden;
}
.messageView:hover {
    // hover到父元素时，显示滚动条
    overflow-y: auto;
}

2.2、动态滚动条

        前面也提到了，这种情况会动态出现的滚动条会挤压子元素。那么我们就需要在父元素里预留好滚动条的位置，这样子元素内容的宽度不会发生变化，滚动条也会出现的很自然。

        对父元素加上scrollbar-gutter: stable; 样式即可在父元素中预留滚动条的位置。大家可以自行试下两种情况的效果。

.messageView {
    flex: 1;
    width: 100%;
    height: 100%:
    scrollbar-gutter: stable; /* 预留滚动条位置 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
    // 父元素默认隐藏滚动条
    overflow-y: hidden;
}
.messageView:hover {
    // hover到父元素时，显示滚动条
    overflow-y: auto;
}

2.3、滚动条样式

        在动态滚动条的基础上，我们可以使用滚动条伪元素去设置滚动条样式，比如，设置只显示滚动条轨道（通过设置滚动条背景颜色，使视觉上隐藏）。

.messageView {
    flex: 1;
    width: 100%;
    height: 100%:
    scrollbar-gutter: stable; /* 预留滚动条位置 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
    // 父元素默认隐藏滚动条
    overflow-y: hidden;
}
.messageView:hover {
    // hover到父元素时，显示滚动条
    overflow-y: auto;
}
// 滚动条
.messageView::-webkit-scrollbar {
  // 贴合主题背景，视觉上隐藏
  background-color: white;
  // 宽高
  width: 5px;
  height: 5px;
}
// 滚动条轨道
.messageView::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 10px;
}

三、实际效果