panel is unscrollable when the mouse is on the fixed position element

Question

I meet a problem that the page is uncrollable when the mouse is on the fixed position element.

As shown below, I created a div with "abcd" using fixed position. The background is a scrollable content. However, when my mouse is at the blue div, I can't scroll the background. I am wondering if there is a way to still scroll the background while the mouse is on the fix positioned div?

The div is created by

.div{
    background: aliceblue;
    position: fixed;
    overflow-y: scroll;
    z-index: 999;
}

Answer 1

Try adding the following property to your fixed element:

.div {
    pointer-events: none;
}