4 ms·

Good stuff. The scrollbar-gutter property is new to me. I've wanted that before in cases where content getting longer would cause a scroll bar to show, which

Good stuff. The scrollbar-gutter property is new to me. I've wanted that before in cases where content getting longer would cause a scroll bar to show, which would eat into the content space, which would break the layout. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-g...

schemescape 5y ago
scrollbar-gutter is new to me as well, and something I really want to use... but CanIUse claims it only has 66% support: https://caniuse.com/mdn-css_properties_scrollbar-gutter https://caniuse.com/mdn-css_properties_scrollbar-gutter
- onion2k 5y ago
  And that is fine. Expecting your website to be identitical across every browser is not the goal. You need to build sites that respond to the capabilities of the user's device, and progressively enhance to get better as more features become available. If the website is less wide to account for the scrollbar on browsers where it can be that's awesome, and if it's full width on browsers that don't have the gutter feature that's OK too. Critical functionality should work everywhere. Then users should get the best experience possible that their browser supports on top of that.
  - faeyanpiraat 5y ago
    I’m having trouble clicking the “need a website?” link on ooer.com on iPhone 7. Should I record a video about the issue?
    - onion2k 5y ago
      There is no critical functionality on my website. :)
      - faeyanpiraat 5y ago
        I didn’t try making a point, it was just a genuine feedback.
        onion2k 5y ago
        Thank you. But seriously, my website only gets updated when I'm looking for a job. The rest of the time it just sits there gathering dust.
  - schemescape 5y ago
    Good point, but in my case this caused a horizontal scroll bar to also appear, which looked awful, so I guess it was critical functionality to me and not just an enhancement :)
- dspillett 5y ago
  It is a fairly new property so it may be a while before it is ubiquitous (the MDN page links to a ticket for implementing it is Firefox where it is not yet present at all, for instance). As it is a property to reduce visual artifacts (as content length changes) it is a safe one to specify and have ignored where not supported: users of other browsers will just not get that minor benefit until the browser catches up. This may be a problem if you are trying to achieve perfectly identical presentation to all users, but you've got a lot of problems coming your way too if that is one of your goals! A browser not supporting this property of you user it is not going to break a design, not to the point of causing functionality or usability issues, unless you are doing something very strange and complex.
- vince14 5y ago
  Me too, that's why I always have `html { overflow-y: scroll; }`.
chrismorgan 5y ago
Neither location mentions what should I think be by far the main purpose of scrollbar-gutter: avoiding layout shift when you open a modal and disable the page’s scrollbar to avoid confusion. Perhaps the best solution there would be some way of designating a certain scrollable area as the document scrollable area when the body element doesn’t have scrollbars, so that Up/Down/PageUp/PageDown/Space/Shift+Space all act as though it were focused when the body is focused. That way, you could have the modal exist in the DOM after the main scrolling area, rather than inside it, and you wouldn’t need to worry about document scrollbars or overscroll behaviour. Multi-pane views (very common in desktop apps) are normally a bit of a mess on the web, and it’s always a pain when you come across a web page that has shunned the body scrollable area and put everything in something like a <main style="overflow:auto">, so that you have to focus that before keyboard scrolling works. I should finish my draft blog post from a year or two ago where I explored the space and all the hoops you have to jump through to have it work almost perfectly, though it still requires some client-side JavaScript to redirect body focus to the correct element.
- genuine_smiles 5y ago
  > Neither location mentions what should I think be by far the main purpose of scrollbar-gutter: avoiding layout shift when you open a modal and disable the page’s scrollbar to avoid confusion. This can already be avoided by layering things right and not removing the scrollbar.
  - chrismorgan 5y ago
    If you don’t remove the scrollbar, then the document can be scrolled underneath the modal. You can, these days, significantly mitigate this with overscroll-behavior on the modal backdrop, but the document scrollbar itself still works. (I will note, however, that overscroll-behavior is still missing on Safari. And scrollbar-gutter isn’t on Safari and is still disabled by default on Firefox.)
    - vcryan 5y ago
      I think in a lot of cases, allowing the content below a modal to scroll is okay. If the user wants to scroll the content beneath a modal... so be it

schemescape 5y ago

scrollbar-gutter is new to me as well, and something I really want to use... but CanIUse claims it only has 66% support: https://caniuse.com/mdn-css_properties_scrollbar-gutter https://caniuse.com/mdn-css_properties_scrollbar-gutter

onion2k 5y ago
And that is fine. Expecting your website to be identitical across every browser is not the goal. You need to build sites that respond to the capabilities of the user's device, and progressively enhance to get better as more features become available. If the website is less wide to account for the scrollbar on browsers where it can be that's awesome, and if it's full width on browsers that don't have the gutter feature that's OK too. Critical functionality should work everywhere. Then users should get the best experience possible that their browser supports on top of that.
- faeyanpiraat 5y ago
  I’m having trouble clicking the “need a website?” link on ooer.com on iPhone 7. Should I record a video about the issue?
  - onion2k 5y ago
    There is no critical functionality on my website. :)
    - faeyanpiraat 5y ago
      I didn’t try making a point, it was just a genuine feedback.
      - onion2k 5y ago
        Thank you. But seriously, my website only gets updated when I'm looking for a job. The rest of the time it just sits there gathering dust.
- schemescape 5y ago
  Good point, but in my case this caused a horizontal scroll bar to also appear, which looked awful, so I guess it was critical functionality to me and not just an enhancement :)
dspillett 5y ago
It is a fairly new property so it may be a while before it is ubiquitous (the MDN page links to a ticket for implementing it is Firefox where it is not yet present at all, for instance). As it is a property to reduce visual artifacts (as content length changes) it is a safe one to specify and have ignored where not supported: users of other browsers will just not get that minor benefit until the browser catches up. This may be a problem if you are trying to achieve perfectly identical presentation to all users, but you've got a lot of problems coming your way too if that is one of your goals! A browser not supporting this property of you user it is not going to break a design, not to the point of causing functionality or usability issues, unless you are doing something very strange and complex.
vince14 5y ago
Me too, that's why I always have `html { overflow-y: scroll; }`.

chrismorgan 5y ago

Neither location mentions what should I think be by far the main purpose of scrollbar-gutter: avoiding layout shift when you open a modal and disable the page’s scrollbar to avoid confusion. Perhaps the best solution there would be some way of designating a certain scrollable area as the document scrollable area when the body element doesn’t have scrollbars, so that Up/Down/PageUp/PageDown/Space/Shift+Space all act as though it were focused when the body is focused. That way, you could have the modal exist in the DOM after the main scrolling area, rather than inside it, and you wouldn’t need to worry about document scrollbars or overscroll behaviour. Multi-pane views (very common in desktop apps) are normally a bit of a mess on the web, and it’s always a pain when you come across a web page that has shunned the body scrollable area and put everything in something like a <main style="overflow:auto">, so that you have to focus that before keyboard scrolling works. I should finish my draft blog post from a year or two ago where I explored the space and all the hoops you have to jump through to have it work almost perfectly, though it still requires some client-side JavaScript to redirect body focus to the correct element.

genuine_smiles 5y ago
> Neither location mentions what should I think be by far the main purpose of scrollbar-gutter: avoiding layout shift when you open a modal and disable the page’s scrollbar to avoid confusion. This can already be avoided by layering things right and not removing the scrollbar.
- chrismorgan 5y ago
  If you don’t remove the scrollbar, then the document can be scrolled underneath the modal. You can, these days, significantly mitigate this with overscroll-behavior on the modal backdrop, but the document scrollbar itself still works. (I will note, however, that overscroll-behavior is still missing on Safari. And scrollbar-gutter isn’t on Safari and is still disabled by default on Firefox.)
  - vcryan 5y ago
    I think in a lot of cases, allowing the content below a modal to scroll is okay. If the user wants to scroll the content beneath a modal... so be it