search

sveltejs / svelte-scroller

A <Scroller> component for Svelte apps
https://svelte.dev/repl/76846b7ae27b3a21becb64ffd6e9d4a6
Other
347 stars 25 forks source link

2 questions #4

Open janwillemtulp opened 5 years ago

janwillemtulp commented 5 years ago

  1. what's going on with these lower case element names, like <svelte-scroller-outer> that only seem to map to css classes?

  2. what is the best way to allow pointer events for the fixed part without changing the original code? Currently pointer-events are disabled, but I have an interactive component in my fixed part.

basilesimon commented 3 years ago

what is the best way to allow pointer events for the fixed part without changing the original code? Currently pointer-events are disabled, but I have an interactive component in my fixed part.

I'm currently wondering the same thing :)

njdehoog commented 2 years ago

what is the best way to allow pointer events for the fixed part without changing the original code? Currently pointer-events are disabled, but I have an interactive component in my fixed part.

@janwillemtulp were you ever able to figure this out? I'm running into the same issue.

jeffmacinnes commented 1 year ago

Has anyone had any luck figuring out a workaround for this? I'm hitting the same issue as well....

njdehoog commented 1 year ago

Yes, here's a demo project: https://svelte.dev/repl/32abb5e2ab3a4670a19206a40ab7f375?version=3.55.1

You need the following CSS:

[slot="background"] {
  pointer-events: all;
}

[slot="foreground"] {
  pointer-events: none;
}

And then you need to make sure the parent doesn't 'eat' the pointer events:

.your-container-div {
  pointer-events: none;
}
jeffmacinnes commented 1 year ago

@njdehoog Amazing! Thank you so much!