使用鼠标滚轮滚动在CSS伪选择器上不起作用。为什么？

Question

这里是CSS代码：

div{
  background:silver;
  height:200px;
  width:200px;
  display:block;
}
div:before{
  content:"adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda sad asd a THE END";
  display:block;
  background:blue;
  height:50%;
  width:100%;
  overflow:auto;
}

这里是小提琴：https://jsfiddle.net/xa0rmdpn/

尝试使用鼠标滚轮滚动。

我正在使用Opera的最新版本。

Answer 1

您应该使用滚动到Div而不是:before

div{
  background:silver;
  height:200px;
  width:200px;
  overflow-y:auto;
}
div:before{
  content:"adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda adsasd asd ad ad asd asd ad asd asda sad asd a THE END";
  display:block;
  background:blue; 
  width:100%;
}

<div>

</div>