当光标位于固定 div 上时页面不滚动

Question

My layout looks almost identical to this codepen .

.parent {
  color: white;
  padding: 70px;
  position: relative;
  background-color: #0074d9;
  margin-top: 50px;
}

.element {
  background-color: lighten(#0074d9, 20);
  opacity: .85;
  padding: 20px;
  color: rgba(255,255,255,.9);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

The codepen works the right way, so it's been hard to come up with a demonstrable example.

When my cursor is positioned over the fixed "child element" div, I want to be able to scroll the parent but not be able to clickthrough.

The common answer seems to be "pointer-events: none", but that allows click interaction with the page below.

Open to other suggestions or explanations as to why it works in the codepen, but doesn't outside of it.

Answer 1

The solution that worked for me was to use jquery to grab the parent by id and add my deltaY to its scrollTop.

<div
    onWheel={(e) => {
        const component = $(`#content`);
        const contentScrollPosition = component.scrollTop();

        component.prop("scrollTop", contentScrollPosition + e.deltaY);
    }}
</div>

This allows me to scroll the parent even when my cursor is on the fixed-position div.

Unfortunately, mobile doesn't work well. First, you would need to track the touch event though onTouchStart, End, and Move. Even then, you lose touch scroll momentum which makes it feel too unnatural.