4 ms·

Half these things should be avoided. Don't mess with scroll or scroll bars. If a user wants smooth scroll, they will enable it in their browser. Snappy scroll i

Half these things should be avoided. Don't mess with scroll or scroll bars. If a user wants smooth scroll, they will enable it in their browser. Snappy scroll is unpredictable and disorienting.

ta9999 6y ago
Yeah, if there's an alternative with functioning scrollbars people will probably use that instead. It's always surprising how popular screwing with basic UI elements like that always becomes.
TechBro8615 6y ago
How did I know this would be the top comment on HN? There are legitimate uses for snap-scrolling, e.g. a horizontal carousel on mobile (or even desktop, depending on implementation), where you want swiping to swipe so the next item is in view. Also, you said half these things should be avoided -- care to list the others? It seems like the theme of the post is "you don't need JavaScript to do this." If some functionality is rarely needed, but does have use cases, it's nice to know that it can be done in CSS without requiring JS (which would be clearly worse).
- pmlnr 6y ago
  > There are legitimate uses for snap-scrolling https://shouldiuseacarousel.com/ https://shouldiuseacarousel.com/ So... no, there isn't a legitimate use for snap-scrolling. Leave scrolling alone.
  - SamBam 6y ago
    nytimes.com uses horizontal carousel on mobile very well, I feel. It's usually for a group of related stories, it's non-intrusive, uses scrolling instead of buttons, and the next story is always partially-visible, which I think is gold-star UI for letting users know it exists. My understanding is that NY Times spends quite a lot of effort on user metrics, so I would guess, but can't say for sure, that they have evidence that their carousels work.
  - ryanwhitney 6y ago
    There are plenty of uses for snap scrolling and carousels that aren’t rotating hero images. See something like https://airbnb.com https://airbnb.com which uses it for categories a’la the App Store. Image galleries, Netflix-type layouts, etc.
    - lucideer 6y ago
      I'm struggling to see how that is different to "rotating hero images". Is it that it doesn't rotate automatically? What's the UX benefit here? I get that mobile apps use horizontal swiping and some websites want to be app-like, but even in apps the only common horiztonal-swipe pattern I see is the Android hidden menus pattern, which is (a) a subject of debate in UX circles and (b) absolutely nothing like horizontally scrolling item selection, which is still a bad idea even in native mobile apps. The other major example I can think of is Instagram's story circles, which I feel must be intentionally unusable to try and force people to view stories in their full-screen tap-to-advance format.
    - cosmotic 6y ago
      That's a use for sure; though it remains an anti-pattern. Don't mess with the scroll.
  - dfabulich 6y ago
    That page is mostly about auto-rotating carousels. Don't do that. It's also about making your home page a giant carousel, instead of showing multiple things vertically. Don't do that, either. IMO, one great use for carousels is when you have a product catalog with a bunch of category sections, like Netflix. Each category gets a header, e.g. "Action" "Family" "Romance" "Horror" and each category is a horizontally scrolling list of products, with the next one on the list half-visible on the side, so it's clear that you can scroll it into view. Scroll snap can be pretty good for that.
  - dreadlordbone 6y ago
    My clients have large galleries of photos, would you prefer that be paginated?
    - metalliqaz 6y ago
      to a carousel? probably. or infinite scroll, depending on the type of content. would probably be best to split up the galleries into smaller groupings, though
    - pmlnr 6y ago
      Yes.
  - ravenstine 6y ago
    Carousels are the modern day <blink> and <marquee> tags. The only difference is that it occasionally has its place with photos, but it's just not optimal for any sort of written content, even if it's just a headline and short description.
  - jessep 6y ago
    Oy. Yes there, are legit uses. A few straightforward examples: 1) You implementing something boards (like trello) on mobile. The well-established-in-all-the-apps-that-specialize-in-this behavior is snap scrolling. 2) Tiktok/stories/etc. When you scroll up or right, does it ever land you in between two stories? No. This is the exact behavior. 3) Presentations. Say you are building a presentation tool. The whole point is to define separate slides that are on screen one at a time. This is a very natural and appropriate use of this behavior. So, yeah, carousels suck. But, this behavior is commonly used and useful in a lot of modern software.
- ectopod 6y ago
  > It seems like the theme of the post is "you don't need JavaScript to do this." Yet you can't see the examples without JavaScript.
  - TechBro8615 6y ago
    This seems needlessly nitpicky. You need JavaScript to view the embedded CodeSandbox, which is an interactive application within an iFrame. Good luck making what's effectively an IDE without JavaScript. I suppose the author could show the CSS snippets inline and make you click to a demo, but that's not very fun is it?
    - ectopod 6y ago
      You don't need an entire IDE to show examples of content styled with CSS.
  - deleted 6y ago
    [deleted]
  - elwell 6y ago
    The anti-JS mindset (I assume for privacy reasons) seems so backwards to me on a social bookmarking site targeted at programmers/technologists.
    - ravenstine 6y ago
      We wouldn't have this mindset if sites retained enough basic functionality with it off, which is totally possible. I use NoScript pretty aggressively, and it's astounding how many sites actually render nothing unless you have JS turned on. Browsers and backends both implement form validation, yet most sites today don't support submitting a basic form without JS. I'm not expecting things like Spotify and YouTube to work without JS, but I should be able to at least read most webpages without running full-fledged applications with 7 different tracking scripts and 5 custom fonts.
- elwell 6y ago
  > How did I know this would be the top comment on HN? Actually I was thinking the top comment would be something about the site breaking the back button
  - ezekg 6y ago
    I've already commented that today for another post so I'll refrain.
WORMS_EAT_WORMS 6y ago
> If a user wants smooth scroll, they will enable it in their browser. I really think comments like this aren't helpful and presumptuous to pressing forward. People hate change and love their table layouts... Just going to make a friendly counter argument: - Did you read what this actually does? It's for anchor tags... - Bootstrap 5 uses this by default. - Lot of crappy websites out there. I choose loading one line of CSS versus jQuery + animate all day... - For perspective, almost 100% of every little interaction on native apps are animated these days. It's liked so much by the general population that, some would say, made iOS so appealing in the beginning to take off. People like interaction. - It's possible your opinion does not represent the majority anymore (or even that the HN general opinion). - By making it a browser-defined CSS property versus being JavaScript, you are actually opening accessibility doors for people having this be device configurable. I really think if someone hates it so much or for accessibility reasons, instead they should just disable it in their browser. So literally the opposite of what you said. --- Edit: Example of why this is important to be part of CSS for accessibility versus JavaScript: ``` @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } ``` or: ``` @media (prefers-reduced-motion) { .animation { animation: none; } :root { scroll-behavior: auto; } } ``` I think HN can chill a bit here.
- hodder 6y ago
  I dont know anyone who wants scroll to be ruined by a dipshit developer. If anyone fucks with scroll or the back button they honestly have shit for brains when it comes to UX. Honestly if someone has a job in UX and they decide to mess with scroll, they need to be retrained.
  - deleted 6y ago
    [deleted]
  - SamBam 6y ago
    Wow, quite aggressive. How is allowing jump-scrolling in response to clicking "ruining scrolling by a dipshit developer?"
tshaddox 6y ago
Which scroll-related tips are you talking about? scroll-behavior: smooth seems to only affect the behavior of clicking named anchor tags. It doesn't seem to change the behavior when scrolling with a mouse wheel or trackpad. Other than general accessibility issues related to animations, I don't see any usability concerns here. scroll-snap-type and scroll-snap-align also don't seem to affect the behavior when scrolling with a mouse wheel or trackpad, except that shortly after you stop scrolling the browser will smoothly scroll to the specified snap points. I suppose this could be over-used (like anything), but it seems to me that there are some pretty obvious places where using this would be entirely appropriate and not unpredictable or disorienting. ::-webkit-scrollbar styling strikes me as the most concerning, both because of how easy and tempting it is to over-use and because the browser support has some subtle gotchas. But this one doesn't seem related to your complaint about smooth versus snappy scrolling.

Half these things should be avoided. Don't mess with scroll or scroll bars. If a user wants smooth scroll, they will enable it in their browser. Snappy scroll is unpredictable and disorienting.

ta9999 6y ago

Yeah, if there's an alternative with functioning scrollbars people will probably use that instead. It's always surprising how popular screwing with basic UI elements like that always becomes.

TechBro8615 6y ago

How did I know this would be the top comment on HN? There are legitimate uses for snap-scrolling, e.g. a horizontal carousel on mobile (or even desktop, depending on implementation), where you want swiping to swipe so the next item is in view. Also, you said half these things should be avoided -- care to list the others? It seems like the theme of the post is "you don't need JavaScript to do this." If some functionality is rarely needed, but does have use cases, it's nice to know that it can be done in CSS without requiring JS (which would be clearly worse).

pmlnr 6y ago
> There are legitimate uses for snap-scrolling https://shouldiuseacarousel.com/ https://shouldiuseacarousel.com/ So... no, there isn't a legitimate use for snap-scrolling. Leave scrolling alone.
- SamBam 6y ago
  nytimes.com uses horizontal carousel on mobile very well, I feel. It's usually for a group of related stories, it's non-intrusive, uses scrolling instead of buttons, and the next story is always partially-visible, which I think is gold-star UI for letting users know it exists. My understanding is that NY Times spends quite a lot of effort on user metrics, so I would guess, but can't say for sure, that they have evidence that their carousels work.
- ryanwhitney 6y ago
  There are plenty of uses for snap scrolling and carousels that aren’t rotating hero images. See something like https://airbnb.com https://airbnb.com which uses it for categories a’la the App Store. Image galleries, Netflix-type layouts, etc.
  - lucideer 6y ago
    I'm struggling to see how that is different to "rotating hero images". Is it that it doesn't rotate automatically? What's the UX benefit here? I get that mobile apps use horizontal swiping and some websites want to be app-like, but even in apps the only common horiztonal-swipe pattern I see is the Android hidden menus pattern, which is (a) a subject of debate in UX circles and (b) absolutely nothing like horizontally scrolling item selection, which is still a bad idea even in native mobile apps. The other major example I can think of is Instagram's story circles, which I feel must be intentionally unusable to try and force people to view stories in their full-screen tap-to-advance format.
  - cosmotic 6y ago
    That's a use for sure; though it remains an anti-pattern. Don't mess with the scroll.
- dfabulich 6y ago
  That page is mostly about auto-rotating carousels. Don't do that. It's also about making your home page a giant carousel, instead of showing multiple things vertically. Don't do that, either. IMO, one great use for carousels is when you have a product catalog with a bunch of category sections, like Netflix. Each category gets a header, e.g. "Action" "Family" "Romance" "Horror" and each category is a horizontally scrolling list of products, with the next one on the list half-visible on the side, so it's clear that you can scroll it into view. Scroll snap can be pretty good for that.
- dreadlordbone 6y ago
  My clients have large galleries of photos, would you prefer that be paginated?
  - metalliqaz 6y ago
    to a carousel? probably. or infinite scroll, depending on the type of content. would probably be best to split up the galleries into smaller groupings, though
  - pmlnr 6y ago
    Yes.
- ravenstine 6y ago
  Carousels are the modern day <blink> and <marquee> tags. The only difference is that it occasionally has its place with photos, but it's just not optimal for any sort of written content, even if it's just a headline and short description.
- jessep 6y ago
  Oy. Yes there, are legit uses. A few straightforward examples: 1) You implementing something boards (like trello) on mobile. The well-established-in-all-the-apps-that-specialize-in-this behavior is snap scrolling. 2) Tiktok/stories/etc. When you scroll up or right, does it ever land you in between two stories? No. This is the exact behavior. 3) Presentations. Say you are building a presentation tool. The whole point is to define separate slides that are on screen one at a time. This is a very natural and appropriate use of this behavior. So, yeah, carousels suck. But, this behavior is commonly used and useful in a lot of modern software.
ectopod 6y ago
> It seems like the theme of the post is "you don't need JavaScript to do this." Yet you can't see the examples without JavaScript.
- TechBro8615 6y ago
  This seems needlessly nitpicky. You need JavaScript to view the embedded CodeSandbox, which is an interactive application within an iFrame. Good luck making what's effectively an IDE without JavaScript. I suppose the author could show the CSS snippets inline and make you click to a demo, but that's not very fun is it?
  - ectopod 6y ago
    You don't need an entire IDE to show examples of content styled with CSS.
- deleted 6y ago
  [deleted]
- elwell 6y ago
  The anti-JS mindset (I assume for privacy reasons) seems so backwards to me on a social bookmarking site targeted at programmers/technologists.
  - ravenstine 6y ago
    We wouldn't have this mindset if sites retained enough basic functionality with it off, which is totally possible. I use NoScript pretty aggressively, and it's astounding how many sites actually render nothing unless you have JS turned on. Browsers and backends both implement form validation, yet most sites today don't support submitting a basic form without JS. I'm not expecting things like Spotify and YouTube to work without JS, but I should be able to at least read most webpages without running full-fledged applications with 7 different tracking scripts and 5 custom fonts.
elwell 6y ago
> How did I know this would be the top comment on HN? Actually I was thinking the top comment would be something about the site breaking the back button
- ezekg 6y ago
  I've already commented that today for another post so I'll refrain.

WORMS_EAT_WORMS 6y ago

> If a user wants smooth scroll, they will enable it in their browser. I really think comments like this aren't helpful and presumptuous to pressing forward. People hate change and love their table layouts... Just going to make a friendly counter argument: - Did you read what this actually does? It's for anchor tags... - Bootstrap 5 uses this by default. - Lot of crappy websites out there. I choose loading one line of CSS versus jQuery + animate all day... - For perspective, almost 100% of every little interaction on native apps are animated these days. It's liked so much by the general population that, some would say, made iOS so appealing in the beginning to take off. People like interaction. - It's possible your opinion does not represent the majority anymore (or even that the HN general opinion). - By making it a browser-defined CSS property versus being JavaScript, you are actually opening accessibility doors for people having this be device configurable. I really think if someone hates it so much or for accessibility reasons, instead they should just disable it in their browser. So literally the opposite of what you said. --- Edit: Example of why this is important to be part of CSS for accessibility versus JavaScript: ``` @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } ``` or: ``` @media (prefers-reduced-motion) { .animation { animation: none; } :root { scroll-behavior: auto; } } ``` I think HN can chill a bit here.

hodder 6y ago
I dont know anyone who wants scroll to be ruined by a dipshit developer. If anyone fucks with scroll or the back button they honestly have shit for brains when it comes to UX. Honestly if someone has a job in UX and they decide to mess with scroll, they need to be retrained.
- deleted 6y ago
  [deleted]
- SamBam 6y ago
  Wow, quite aggressive. How is allowing jump-scrolling in response to clicking "ruining scrolling by a dipshit developer?"

tshaddox 6y ago

Which scroll-related tips are you talking about? scroll-behavior: smooth seems to only affect the behavior of clicking named anchor tags. It doesn't seem to change the behavior when scrolling with a mouse wheel or trackpad. Other than general accessibility issues related to animations, I don't see any usability concerns here. scroll-snap-type and scroll-snap-align also don't seem to affect the behavior when scrolling with a mouse wheel or trackpad, except that shortly after you stop scrolling the browser will smoothly scroll to the specified snap points. I suppose this could be over-used (like anything), but it seems to me that there are some pretty obvious places where using this would be entirely appropriate and not unpredictable or disorienting. ::-webkit-scrollbar styling strikes me as the most concerning, both because of how easy and tempting it is to over-use and because the browser support has some subtle gotchas. But this one doesn't seem related to your complaint about smooth versus snappy scrolling.