html滚动条怎么设置

html滚动条设置

在网页的开发中，我们经常会使用到滚动条来让用户浏览页面内容。滚动条的样式和行为可以通过CSS来进行自定义。本文将介绍如何在HTML中设置滚动条，以及如何对滚动条进行样式设置。

在HTML中设置滚动条

HTML中可以使用iframe、div等元素包含内容，从而实现滚动条的显示。其中，iframe元素是HTML中专门用于显示其他网页的标签，而div元素则是用于分隔不同内容的标签。

下面我们将举例说明如何使用div元素来实现滚动条的显示。首先，我们需要在HTML中添加一个包含内容的div元素：

登录后复制

其中，id属性为scrollable-content的div元素为我们的滚动容器。

接下来，我们需要为该div元素添加样式，以便让浏览器显示滚动条。在CSS中，我们可以通过overflow属性来控制元素的滚动行为。overflow属性有以下几种取值：

我们将为scrollable-content元素添加如下样式：

#scrollable-content {
    height: 200px; /* 设置元素高度 */
    overflow: auto; /* 显示滚动条 */
}

登录后复制

通过设置height属性为200px，我们使滚动容器的高度为200像素。将overflow属性设置为auto，则滚动容器的内容超过容器高度时，浏览器会自动显示竖直方向的滚动条。

对滚动条进行样式设置

除了使用默认的浏览器滚动条样式外，我们还可以使用CSS样式自定义滚动条。不同的浏览器对滚动条的样式支持略有差异，但以下是一些通用的样式设置。

1.设置滚动条宽度和颜色

我们可以通过设置::-webkit-scrollbar属性来实现对滚动条宽度和颜色的控制。以下是一个示例：

::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
    height: 10px; /* 设置滚动条高度 */
}
::-webkit-scrollbar-thumb {
    background-color: #cccccc; /* 设置拖动条颜色 */
}
::-webkit-scrollbar-track {
    background-color: #f2f2f2; /* 设置滚动条背景颜色 */
}

登录后复制

在上述样式中，我们使用了::-webkit-scrollbar表示对滚动条样式的设置。其中，-webkit-前缀是用于支持webkit内核的浏览器，如Chrome、Safari等。

我们通过设置width和height属性来调整滚动条的宽度和高度。使用::-webkit-scrollbar-thumb样式来设置拖动条的颜色，使用::-webkit-scrollbar-thumb样式来设置滚动条背景颜色。

2.设置滚动条圆角

我们也可以通过设置滚动条的圆角样式来改变滚动条的形状。以下是示例代码：

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 4px; /* 设置圆角 */
}

登录后复制

在上述样式中，我们使用border-radius属性来设置滚动条的圆角半径为4像素。

总结

本文介绍了如何在HTML中设置滚动条，以及如何对滚动条进行样式设置。虽然不同浏览器对滚动条的样式支持有所不同，但我们可以通过::-webkit-scrollbar样式来实现对webkit内核浏览器的滚动条样式控制。通过使用CSS样式，我们可以让滚动条更加美观，更符合网页的设计风格。

纯css实现鼠标滚动横向滚动条

时间到2022年9月23日，记录一下通过css实现鼠标滚动横向滚动条。

用vue3封装了一个组件需要的拷贝过去。

效果图：

视觉上可能没什么效果

父组件调用样例：

可以把scrolXDiv当作一个普通的div使用，但必须设置height否则滚动条会出不来。

vue组件scrolXDiv.vue

实现原理是套多层div：

1.第一层最外层的相对定位作为容器；

2.第二层div继续相对定位，利用padding-top:100%;绘制一个正方形，这样把容器的宽度转为了正方形的高度；

3.第三层div用height:100%;继承第二层的高度，再通过transform: rotateZ(-90deg) rotateY(180deg);翻转使得高度变成宽度，由于高度继承自第二层的高度也就是第二层的宽度即第一层的宽度，这样旋转以后视觉的宽度就和容器一样了，视觉的实际上是width来自于外部传参设置（这里不设置也是有滚动效果的但是滚动条会被遮挡）

4.第四层div再旋转回来，保证里面的内容视觉效果和原本一样。

5.这里只设置横向滚动并且滚动鼠标滚轮的时候滚动是横向的，如果还需要纵向滚动可以设置第四层的style，通过$attrs把调用组件传入的属性直接传给第四层div以达到类似默认div的效果。

滚动条的美化参数scrollbar.less

.scrollbar {
  &::-webkit-scrollbar {
    width           : 7px;
    height          : 7px;
    background-color: #f5f5f5;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    box-shadow        : inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius     : 10px;
    background-color  : #f5f5f5;
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius     : 10px;
    box-shadow        : inset 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color  : #c8c8c8;
  }
}