search

stevenho0811 / nuxt-breakpoints

Resize observer breakpoints with Nuxt.js module.
https://stevenho0811.github.io/nuxt-breakpoints/
MIT License
15 stars 9 forks source link

Scrollbar width not handled? #13

Open tbredin opened 3 years ago

tbredin commented 3 years ago

The window width this tool reports is not correct when a scrollbar is present.

eg: I am seeing width: 753 when my browser is actually 768 px wide, showing my >767px lg layout from my css, but still reporting incorrectly as md by this utility because it is not considering media queries (which include scrollbar width).

Looks like its querying the inner width rather than including the scrollbar in its calculations. CSS media queries will measure your screen including the scrollbar.

Testing in Chrome 87.0.4280.141

tbredin commented 3 years ago

Possible workaround:

// hide the scrollbar on the body
body {
    overflow: hidden;
}

// requires a div container around your app to handle the scroll  
body > div {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    // unsure if this is really needed (see comment below)
    -webkit-overflow-scrolling: touch;
}

This will work because the scrollbar you'll now see is on the inner div, whereas the body is always the full width of the browser so matching the equivalent CSS media query.

I haven't tested this thoroughly yet, and from memory it might have issues on some touch devices that need -webkit-overflow-scrolling: touch; on scroll containers to reproduce their momentum scrolling behaviour.