鼠标悬停在文本区域滚动条上会提供文本光标而不是默认光标

Question

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

我添加了 hover 但它没有按预期工作。背景变成红色，这意味着悬停有效，但 cursor 没有改变。

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

确保单击 "Run code snippet" 观看演示，或转到此处：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

目前 cursor 似乎不支持任何滚动条元素。这是此类 unfinished properties.

的预期行为

This blog post on WebKit mentions several possible customisations, but the cursor is not stated. Other properties such as visibility: hidden are not supported either.

一个解决方法可能是在文本区域附近添加一个 div，将这两个包裹在另一个 div 中，改为设置父级 div 的高度，并设置内部 div 停留在滚动条下方并将光标置于其上。

Answer 2

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

使用这个：

textarea {
    cursor: auto;
}

鼠标悬停在文本区域滚动条上会提供文本光标而不是默认光标

Mouse hover over textarea scrollbar gives text cursor instead of default cursor

css

hover

scrollbar

mouse-cursor