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

Question

我有一个带有滚动条的文本区域。我知道它可能只适用于 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/

Answer 1

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

使用这个：

textarea {
    cursor: auto;
}

Answer 2

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

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

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