3 Matching Annotations
  1. Aug 2021
    1. With JavaScript, you can actually calculate the width of the scrollbar and whether it’s visible by comparing two properties—window.innerWidth and document.body.clientWidth. If these are equal, the scrollbar isn’t visible. If these are different, we can subtract the body width from the window width to get the width of the scrollbar:const scrollbarWidth = window.innerWidth - document.body.clientWidthWe’ll want to perform this both on page load and on resize, in case someone resizes the window vertically and changes the overflow. Then, once we have the scrollbar width, we can assign it as a CSS variable:document.body.setProperty("--scrollbarWidth", `${scrollbarWidth}px`)

      missing feature: vw/vh can't be used "directly" because doesn't account for scrollbars

  2. Aug 2020
    1. This illustrates the difference between two types of scrolling:

      • scrolling within the dialog
      • scrolling the document that includes the dialog