镜像站点 · 本页由第三方 GitHub 只读镜像提供,非 GitHub 官方站点,不接受任何登录或凭据输入。前往 github.com
Skip to content

Docs: Scrollbar width #6443

Description

@mathiask88
  • Version: --
  • Platform: Chrome 50
  • Subsystem: DOCS

Would it be possible to set the scrollbar width to a reasonably value like 20px? I'm on a 3440x1440px device and it is so so hard to hit that tiny little bar :)

image

Activity

  1. vsemozhetbyt commented on Apr 28, 2016

    @vsemozhetbyt
    Contributor

    Even on 1366x768 they are hard to hit, both the TOC and the content scrollbars.

  2. ChALkeR commented on Apr 28, 2016

    @ChALkeR
    Member

    screenshot_20160428_131842

    It looks like that to me. It's fine, but could be a bit wider though.

    Would it be possible to set the scrollbar width to a reasonably value like 20px? I'm on a 3440x1440px

    Note that device pixels and (css) reference pixels are not the same. Reference pixel is defined though visual angle.

    So, this should not depend on the devices resolution, but instead the actual question is — is 10 reference pixels scrollbar too small?

  3. added
    docIssues and PRs related to Node.js documentation.
    on Apr 28, 2016
  4. mathiask88 commented on Apr 28, 2016

    @mathiask88
    ContributorAuthor

    @ChALkeR Yes but it is PPI dependend. My Monitor got 190PPI and the scrollbar is really tricky to click. Often I even cant see the grey bar on the white background :)

  5. ChALkeR commented on Apr 28, 2016

    @ChALkeR
    Member

    @mathiask88 This looks like your machine is misconfigured, then. The visual angle of one css pixel isn't PPI dependent (except for rounding error). It's the visual angle and the PPI that define the device pixel ratio that should be set on your system for everything to be rendered correctly.

  6. mathiask88 commented on Apr 28, 2016

    @mathiask88
    ContributorAuthor

    @ChALkeR Thanks, I learned something new :) Nevertheless for me personally it is definitely too small :/

  7. claudiorodriguez commented on Apr 28, 2016

    @claudiorodriguez
    Contributor

    I'll whip up a quick PR with a media query or two. Would you consider 20px to be reasonable for widths 2048 and higher? I don't have a big enough monitor on me at the moment.

  8. ChALkeR commented on Apr 28, 2016

    @ChALkeR
    Member

    @mathiask88 CSS pixels were the same as device pixels when the latest Firefox version was 3.6 (don't confuse with 36).

    Reference: https://www.w3.org/TR/css3-values/#absolute-lengths

    The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

    For example, for PPI = 380 the scrollbars shouldn't be smaller than for PPI = 96, they would be more accurately drawn, because the device pixel ratio would be equal to 4 (for a device at the distance of an arm's length, e.g. a monitor).

  9. mathiask88 commented on Apr 28, 2016

    @mathiask88
    ContributorAuthor

    @ChALkeR Ok got it. But I like the default 96dpi setting in windows on my 190PPI device so as a result i got a device pixel ratio of 1. And because I am also about 1 arm lenght away from my monitor the bars are only half the size of e.g your device. If i compare your screenshot with mine i need a zoom of ~200% for the same size (device pixel ratio is then 2) So I would like to stay at 96 dpi scaling in windows and be able to click that scroll bars :) It would also be okay if the bar in the content frame would be non custom because the size of the default browser bars are okay.

  10. added a commit that references this issue on May 4, 2016
  11. added a commit that references this issue on May 4, 2016
  12. added a commit that references this issue on Jun 1, 2016
  13. added a commit that references this issue on Jul 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    docIssues and PRs related to Node.js documentation.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions