文本区域中的CSS悬停滚动条光标

Posted 2023-05-08

【中文标题】文本区域中的CSS悬停滚动条光标

【英文标题】：CSS hover scrollbar cursor in textarea

【发布时间】：2019-06-21 14:35:30

【问题描述】：

我有一个带有滚动条的文本区域。我知道它可能只适用于 webkit 浏览器，这很好。

我添加了hover，但它没有按预期工作。背景变为红色，表示悬停有效，但cursor 没有改变。

是我做错了什么还是 Chrome 没有完全实现它？

请务必点击“运行代码 sn-p”查看演示，或前往此处：https://jsfiddle.net/k4dm6pgL/

textarea 
  height: 150px;
  width: 500px;


textarea::-webkit-scrollbar 
  background-color: #fff;
  width: 16px;


textarea::-webkit-scrollbar-track 
  background-color: #fff;


textarea::-webkit-scrollbar-track:hover 
  background: red;
  cursor: pointer;


textarea::-webkit-scrollbar-thumb 
  background-color: #babac0;
  border-radius: 16px;
  border: 4px solid #fff;


textarea::-webkit-scrollbar-button 
  display: none;

<textarea>Gingerbread cheesecake bonbon cotton candy cheesecake. Topping pudding ice cream cupcake apple pie pastry caramels. Lemon drops ice cream icing chocolate bar dessert ice cream ice cream. Chocolate cake biscuit cotton candy.

Danish tiramisu tiramisu macaroon fruitcake caramels topping. Halvah oat cake donut. Chocolate cake sugar plum gingerbread jelly cookie. Bear claw marzipan biscuit soufflé donut.

Apple pie chocolate cake tart liquorice pudding sweet roll. Pie gummi bears cake. Dessert apple pie carrot cake tiramisu bear claw.

Danish pie croissant. Cookie halvah lollipop sweet roll gummies wafer marzipan chocolate cake. Caramels chocolate cotton candy cotton candy candy canes. Jelly beans lollipop marzipan chocolate cake chocolate cake cookie.

Dragée bonbon oat cake sweet roll toffee jujubes chocolate cake bear claw sweet. Sesame snaps cupcake pie donut ice cream brownie. Danish carrot cake gummi bears oat cake sweet roll oat cake dessert chocolate cake cake. Caramels tart liquorice.

Gingerbread cheesecake bonbon cotton candy cheesecake. Topping pudding ice cream cupcake apple pie pastry caramels. Lemon drops ice cream icing chocolate bar dessert ice cream ice cream. Chocolate cake biscuit cotton candy.

Danish tiramisu tiramisu macaroon fruitcake caramels topping. Halvah oat cake donut. Chocolate cake sugar plum gingerbread jelly cookie. Bear claw marzipan biscuit soufflé donut.

Apple pie chocolate cake tart liquorice pudding sweet roll. Pie gummi bears cake. Dessert apple pie carrot cake tiramisu bear claw.

Danish pie croissant. Cookie halvah lollipop sweet roll gummies wafer marzipan chocolate cake. Caramels chocolate cotton candy cotton candy candy canes. Jelly beans lollipop marzipan chocolate cake chocolate cake cookie.

Dragée bonbon oat cake sweet roll toffee jujubes chocolate cake bear claw sweet. Sesame snaps cupcake pie donut ice cream brownie. Danish carrot cake gummi bears oat cake sweet roll oat cake dessert chocolate cake cake. Caramels tart liquorice.</textarea>

同样的内容也可以在这里编辑：https://jsfiddle.net/k4dm6pgL/

【问题讨论】：

抱歉，我看不到任何红色背景，您能否提供更多关于您想要实现的目标的详细信息？ 编辑：我正在使用 Chrome

@Ced 确保您使用的是 chrome。 webkit === chrome

我其实是但无法重现

@Ced 您是否单击“运行代码 sn-p”？请尝试使用 jsfiddle 链接，看看是否显示效果更好。

@Maurice 您是否单击“运行代码 sn-p”？试试 jsfiddle 链接，看看是否有帮助。

【参考方案1】：

我找到了一个简单的解决方案，对我来说效果很好。

使用这个：

textarea 
    cursor: auto;

【讨论】：

我希望光标在文本上方时成为选择 I-bar 光标（这是它的行为方式），但我希望它在滚动条上方时返回默认箭头指针。这个简单的实现 CSS 完美地完成了这个技巧。

像魔术一样工作，但光标的初始值不是auto吗？似乎是浏览器错误。

【参考方案2】：

目前cursor 似乎不支持任何滚动条元素。这是unfinished properties 的预期行为。

This blog post on WebKit 提到了几种可能的自定义，但没有说明光标。其他属性如visibility: hiddenare not supported either。

一种解决方法可能是在您的 textarea 附近添加一个 div，将这两个包装在另一个 div 中，改为设置父 div 的高度，并将内部 div 设置为保持在滚动条下方并将光标设置在其上。

【讨论】：

谢谢！现在我今晚可以睡个好觉了。然而，我不会称它为新房产，因为它自 2010 年以来就已经存在。更像是未完工的房产。我个人认为他们应该更优先地完成它。

不客气@JensTörnell。完全同意这一点，它从 Chrome 版本 4 开始可用，所以我宁愿称它为未完成 :)

我应该这样做还是提供解决方法的建议？你的理智肯定比滚动条上的漂亮触摸更重要！

你有什么想法？我已经知道存在的 js 库。但是它们不如原生滚动条稳定。所以我觉得我现在很好。