选定文本区域的自定义滚动条设计[重复]

Posted 2023-03-06

技术标签:

【中文标题】选定文本区域的自定义滚动条设计[重复]【英文标题】：Custom scrollbar design for selected textarea [duplicate] 【发布时间】：2019-07-18 17:44:18 【问题描述】：

如何在主流浏览器中为特定的textarea 实现自定义滚动设计？

例如：

我的滚动设计的示例图片：

【问题讨论】：

这可能会有所帮助：css-tricks.com/custom-scrollbars-in-webkit 【参考方案1】：

下面简单的 sn-p 足以给你自定义滚动

textarea::-webkit-scrollbar 
    width: 12px;

textarea::-webkit-scrollbar-track 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;


textarea::-webkit-scrollbar-thumb 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

<html>

<body>
  <textarea cols="40" rows="3" wrap="off" >
     Hello
     Hai
     Hell
     World
     Hai
     HHHH
  </textarea>
</body>

</html>

【讨论】：

以上是关于选定文本区域的自定义滚动条设计[重复]的主要内容，如果未能解决你的问题，请参考以下文章

jQuery / JS 获取文本区域的滚动条高度

如何使用内部阴影和滚动条正确设置文本区域的样式