pointer-events not affecting scrollbars in Firefox & Opera

Question

I was working on a dropdown menu in CSS when I found something about pointer-events in Firefox 44. At first I thought it would be a mistake that happened in new version of Firefox, but I saw the problem in Firefox 25 again, and it also exists in Opera 18 (which is running webkit).

The code itself could be very confusing, so I made another sample:

div {
  width: 150px;
  height: 200px;
  line-height: 30px;
  background: #DDD;
  /*- overflow-y -*/
  overflow-y: auto;
  /*- pointer events -*/
  pointer-events: none;
}
div:hover {
  background: #D77;
}

<div>
  text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>
</div>

As you see, the div element's pointer-events property is set to none, so we would expect it not to run the :hover at all.

But just go ahead and move your cursor on the scrollbar (in Firefox and Opera).

pointer-events is completely supported in all major browsers, so what's wrong? Am I missing something?

EDIT:
It's solved in newer versions of opera
but I need It to work at least on all common versions of chrome, opera and firefox
any trick or alternative way?

EDIT 2: here's the fiddle https://jsfiddle.net/ja0ct9s6/2/
at first look it work's well
but take your cursor out of it , move it in again from the right side (when you don't see the dropdown) , It look's the scrollbar still hoverable(?) (remember to use firefox)

Answer 1

Again, not a real solution to your question, but maybe to your problem as far as I understand:

Why not using visibility for showing/hiding the menu? With visibility: hidden scroll bars will not be accessible until the menu is visible.

#navigation>li>ul{
  /*...*/

  /*to hide it by default*/
  visibility: hidden;
  opacity:0;
}

/*hovers*/
#navigation>li:hover>ul{
  visibility: visible;
  opacity:1;
}

Here is a Fiddle.

By the way: pointer-events is not needed with this code.