- From: Alexander Harding via GitHub <sysbot+gh@w3.org>
- Date: Mon, 06 Sep 2021 17:59:33 +0000
- To: public-css-archive@w3.org
As a web developer, my use case is a simple css scroll snap carousel with left/right buttons on desktop. (Example: https://snap.glitch.me/carousel.html) If the user is hovering over the left/right buttons while attempting to scroll, it doesn't scroll the carousel. (This is worse if the buttons are touch friendly/bigger.) Even worse, on horizontal scroll views on a Mac, **this causes horizontal scroll to be redirected to the document root which causes the browser to navigate (forward/back)**. Workarounds I've tried: 1. Use `pointer-events: none;` and attach to `document` mousemove/click events to essentially reimplement interaction with JS. Obviously, this is not great for many reasons, and is flakey due to [this Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1229483) 2. `position: sticky` can be (ab)used for the back/forward buttons when placed inside the scrollview. However, each click event inside a scroll view **causes smooth scrolling to stop and/or stutter** - badly on Firefox. (I've also **not** been able to override this behavior with `e.preventDefault()` At this point, there's no good solution. **This is made worse by there being no way to determine if the user is interacting with a touchpad or via a mouse** - so I can't just remove the buttons if the user has a touchpad. ### Solution `pointer-events: no-wheel;` or similar. Thank you for your consideration. -- GitHub Notification of comment by aeharding Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6280#issuecomment-913793344 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 6 September 2021 17:59:35 UTC