@slidy/core - prevent scroll axis crossing on touch/trackpad

[inspiredlabs]

With the new version of slidy/core, will it be possible to pass in sensitivity in px?

In the previous version of slidy you could pass in sensity, which worked well enough, eg:

options: {
  sensity: 6.25, // lower number is more sensitive
}

Ideally you would pass in 96 to the vertical content wrapper to prevent a horizontal slide. This is especially useful with a mousewheel, or trackpad.

Thank you for Slidy btw. One day I hope it will compete with Flickity!

[Valexr]

Thanks for regards @inspiredlabs, maybe 😁, but in bundle size @slidy/core wins of all carousel scripts now🤓

sensity props excluded from version 3. In core you have gravity & duration for kinetic tuning.
See in example
But haven't props for preventing from scroll crossing... okey will see ) maybe it will be default defending behaviour...🤔

And version @slidy/core without indexer(), scroller() function - this variables will passing through event move on scrollable/target node in function slidy(node, options) in progress🚀

And version @slidy/svelte@3.0 in progress now. All styles customisation through css vars & more...
Stay tune🤓

[Valexr]

@inspiredlabs & 1 more 😁in now development version @slidy/core allready preventing mouse wheel from scroll crossing & wheel sliding possible only with shift key

[Valexr]

@inspiredlabs fixed - now on wheel event with vertical: false preventing horizontal page scroll event (nav of browser history), but have free vertical scroll page. In vertical: true mode not preventing any default browser behavior.
And with e.shiftKey both axis preventing default & Slidy sliding by indexes🤓

[inspiredlabs]

Brilliant, that was quick!

Please can you walk me through getting it to work on this repo?

Here's what I've done:

• npm i @slidy/core in the project root following: https://www.npmjs.com/package/@slidy/core
• passed in vertical: false, to <ul use:slidy={{ ... }}.
• scrolled using the trackpad, see screenshot
• pushed it to this repo.

[Valexr]

Fixed but not published - i'm working on global changes in new version 🤓sorry
I'm see the demo - all working good (as expectedly) on desktop & mobile ...🤷🏻‍♂️

What's yours problem?

[Valexr]

IMG_1642.MOV

[inspiredlabs]

🙃 Whoa – sounds complicated!

I have created a reduced test case in this REPL: https://svelte.dev/repl/d925cb5912d845d98f707327b3bfdb64?version=3.46.4

Please can you explain it further forking the demo above? I don't know what you mean.

[Valexr]

Something like this

I'l maked comments in code for explain ☝🏻

[Valexr]

1. Listen scroll event in scrollable slide item with setTimeout(500)
2. Set gravity: 2 for stops sliding when content scrolling
3. When haven't scroll event & 500ms end on timer - setgravity: 1.2 to default for activate sliding

That's all

[inspiredlabs]

Right 'o – thanks. If you think this is better, that's that then.

Maybe if you do consider different approaches in the future, such as a sensitivity option, then that'd get a +1 from me.

Thanks again.

[Valexr]

You are not starred @Slidy repo yet...?
🤔 i think its not ethic

[Valexr]

& thanks for issue respond - I'm forget making clamp behavior for wheel event 😁👍🏻

[Valexr]

Good news @inspiredlabs 🤓 3.1.0 test draft
By default in clamp: true mode preventing crossscroll behavior✌🏻
Tx for the tip 🚀

p.s. release soon 😎