captivationsoftware/react-sticky

The sticky header overflows the sticky container when scroll horizontally.

Opened this issue · 1 comments

mrdulin commented

I'm submitting a ...

  • bug report
  • feature request
  • support request

If you're reporting a bug, please provide a minimal demonstration of the problem

Bug Demo

What is the current behavior?

The sticky header overflows the sticky container

image

What is the expected or desired behavior?

The sticky header should stay in the sticky container.

Why do you want this? What use case do you have?

I want to scroll horizontally

What is your environment?

  • Version: react-sticky 6.0.3
  • Browser: Edge 120.0.2210.133

Is there anything else I should know?

No.

mrdulin commented

A solution is to use clip-path: inset(0 0 0 0) on the scroll container element.

.wrapper {
  position: relative;
  height: 300px;
  width: 600px;
  overflow: auto;
  border: 1px solid #ddd;
  clip-path: inset(0 0 0 0);
}
  • 😄1