在日常使用中，我们会经常看到网页或应用程序中的文字框或代码框，这些框内部一般都会有一个垂直滚动条，以便查看文本框内部垂直方向上的所有内容。但是，这些默认风格的滚动条可能不是很美观，甚至会破坏页面整体的设计感。那么，如何在textarea中添加自定义样式的滚动条呢？本文将为您深入讲解。

一、什么是textarea和滚动条

TextArea是HTML语言中常用的表单元素之一，可用于收集用户输入的纯文本数据。滚动条，顾名思义就是可以通过鼠标滚轮或按键来滚动条形的按钮，并随之改变页面中特定区域呈现内容的元素。

二、可以定制化滚动条的方式

1.CSS代码

textarea标签的样式可以通过在内部定义样式表来改变外观。下面是一个示例文本框及其样式的代码。

``` css

textarea::-webkit-scrollbar {

width: 12px;

height: 12px;

}

textarea::-webkit-scrollbar-thumb {

border-radius: 10px;

background-color: #5D5D5D;

}

textarea::-webkit-scrollbar-thumb:hover {

background-color: #000;

}

```

首先，使用横跨浏览器的CSS属性-webkit-scrollbar添加了scrollbars元素的样式。接下来，为scrollbars添加了样式用来定义整个操作板的外形，包括它的宽度，高度和边框样式。可以将这些值按自己的喜好更改并自定义您的滚动条。

2.JS插件

Overlayscrollbars.js是一个很棒的滚动条插件，可以用于在textarea中添加自定义的、美观的滚动条。这个插件支持许多滚动条的自定义选项，使得用户可以通过更改各种设置参数，轻松地设计出适合自己应用的滚动条。

```javascript

$(".textarea").overlayScrollbars({

scrollbars : {

visibility : "auto",

autoHide : "never",

autoHideDelay : 800,

dragScrolling : true,

clickScrolling : false,

touchSupport : true,

snapHandle : false

},

});

```

这是一个使用Overlayscrollbars.js的示例代码。如果需要改变外观，更改CSS的相关代码即可。可以在官方文档中查看更多的选项。

三、如何实现textarea中的自定义的滚动条功能

1.使用CSS代码

首先我们需要一个演示的textrea元素。

``` html

```

上述代码将创建一个符合要求的textarea，同时通过内联样式将其边界样式设置为指定宽度和高度，从而让其填充父级容器。

接下来，在textarea元素的内部添加以下CSS代码：

``` css

#txt::-webkit-scrollbar{

width: 11px;

margin-right: 5px;

}

#txt::-webkit-scrollbar-thumb{

background-color: #999;

border-radius: 8px;

}

#txt::-webkit-scrollbar-thumb:hover{

background-color: #555;

}

#txt::-webkit-scrollbar-track{

background-color: #FFF;

border-radius: 8px;

}

```

这一段代码将对Webkit浏览器中的textarea滚动条逐一添加样式。通过添加此样式表，可以轻松自定义其宽度和颜色、边框弧度和退色程度，并且如果需要，也可以随时调整滚动条的位置和大小。

2.使用JS插件

Overlayscrollbars.js是一个可以帮助我们快速的实现自定义的textarea滚动条的插件。首先，您需要将插件文件下载到本地文件夹。然后，在页面的HTML文档中，添加以下代码。

``` html

```

这个示例文本框的范例代码包括了一个基本的文本框和一个JS调用，可以让您轻松地通过jQuery提供的方式来实现自定义的滚动条。要使用它，首先需要下载OverlayScrollbars.js并将其连接到您的Web页面中。随后，您需要使用收到的JS一个简单的语句来初始化码文本框，这样就可以让插件中的复杂代码为您的Web应用程序提供完美的滚动条。

四、总结

在本文中，我们深入讲解了在textarea中添加自定义样式的滚动条的方法。除了使用原生的CSS内联样式外，我们还介绍了使用第三方插件（OverlayScrollbars.js）的方法，帮助您快速、轻松地实现定制化的滚动条。如果您正在设计一个需要提供复杂文本输入的应用程序或网页，那么对于textarea文本框中的滚动条，选择一种符合您需求的方法必不可少。