11 ms·

Scroll snapping, state queries, monster hunter, and gamification

29 points by tobr 1y ago

cmiller1 1y ago
Seems to only work in Chrome, I stared at the "end result" in both Firefox and Safari wondering what the heck was so special about a regular old dropdown menu.
- webstrand 1y ago
  Yeah, this is using a new feature[1] only available in Chrome so far. Mozilla is positive[2] about the specification, so we should see it in Firefox eventually, pending an implementation. [1]: https://developer.chrome.com/blog/a-customizable-select https://developer.chrome.com/blog/a-customizable-select [2]: https://github.com/whatwg/html/pull/10548 https://github.com/whatwg/html/pull/10548
Bengalilol 1y ago
Doesn't work in Safari and Firefox. The end result = the initial result. And I would get rid of the mouse events in favor of pointer events.
- jakelazaroff 1y ago
  But crucially, it does work - it just looks like a normal select, rather than a fancy scroller.
- ethan_smith 1y ago
  Pointer events are definitely the way to go here as they unify touch, pen and mouse inputs while also providing pressure/tilt data and better handling of edge cases like when fingers leave the active area during a gesture.
oneeyedpigeon 1y ago
The delay between reaching the end of the list and the button greying out is a bit awkward, imo. I think the button should disable instantly, when the end of the list is reached.
tobr 1y ago
This is part 4 in a series. Part 1 makes it more clear that this is a very new feature with limited availability. https://utilitybend.com/blog/the-customizable-select-part-one-history-trickery-and-styling-the-select-with-css https://utilitybend.com/blog/the-customizable-select-part-on...
yourpants 1y ago
`<selectedcontent>`? Aren't you supposed to use a hyphen in the names of custom elements?
- shhsshs 1y ago
  https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/selectedcontent https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
  - yourpants 1y ago
    Thanks! Somehow I missed it. Seems it's experimental.
Cyykratahk 1y ago
It's great to see more progress around scroll snapping - I'll have to check out this scroll-state container query and the new events. The biggest missing scroll-snap feature I see is the ability to tell a scrolling container to "snap to the next position in this direction", and maybe by extension "which element(s) are currently snapped". In this article clicking an arrow moves the scroll position by a fixed 40px, but it would be very nice to have a proper API that accounts for element sizes, snap alignments, out-of-axis children, etc. I ended up writing a package a few years ago that does this (scroll-snap-api). It feels so dirty to calculate the styles on every child in the tree just to find scroll snap positions.

29 points by tobr 1y ago

Seems to only work in Chrome, I stared at the "end result" in both Firefox and Safari wondering what the heck was so special about a regular old dropdown menu.

webstrand 1y ago
Yeah, this is using a new feature[1] only available in Chrome so far. Mozilla is positive[2] about the specification, so we should see it in Firefox eventually, pending an implementation. [1]: https://developer.chrome.com/blog/a-customizable-select https://developer.chrome.com/blog/a-customizable-select [2]: https://github.com/whatwg/html/pull/10548 https://github.com/whatwg/html/pull/10548

Bengalilol 1y ago

Doesn't work in Safari and Firefox. The end result = the initial result. And I would get rid of the mouse events in favor of pointer events.

jakelazaroff 1y ago
But crucially, it does work - it just looks like a normal select, rather than a fancy scroller.
ethan_smith 1y ago
Pointer events are definitely the way to go here as they unify touch, pen and mouse inputs while also providing pressure/tilt data and better handling of edge cases like when fingers leave the active area during a gesture.

oneeyedpigeon 1y ago

The delay between reaching the end of the list and the button greying out is a bit awkward, imo. I think the button should disable instantly, when the end of the list is reached.

tobr 1y ago

This is part 4 in a series. Part 1 makes it more clear that this is a very new feature with limited availability. https://utilitybend.com/blog/the-customizable-select-part-one-history-trickery-and-styling-the-select-with-css https://utilitybend.com/blog/the-customizable-select-part-on...

yourpants 1y ago

`<selectedcontent>`? Aren't you supposed to use a hyphen in the names of custom elements?

shhsshs 1y ago
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/selectedcontent https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- yourpants 1y ago
  Thanks! Somehow I missed it. Seems it's experimental.

Cyykratahk 1y ago

It's great to see more progress around scroll snapping - I'll have to check out this scroll-state container query and the new events. The biggest missing scroll-snap feature I see is the ability to tell a scrolling container to "snap to the next position in this direction", and maybe by extension "which element(s) are currently snapped". In this article clicking an arrow moves the scroll position by a fixed 40px, but it would be very nice to have a proper API that accounts for element sizes, snap alignments, out-of-axis children, etc. I ended up writing a package a few years ago that does this (scroll-snap-api). It feels so dirty to calculate the styles on every child in the tree just to find scroll snap positions.