Scrollbars & CSS Custom Properties, by Louis Hoebregts

Photo by Maria Teneva on Unsplash

Abstract

  • The scroll bars of Widows take up viewport space.
  • vwThe unit does not take into account the scroll bar.
  • Fixed the fixed button in the fixed pop-up box is positioned relative to the viewport, not the pop-up box.

The body of the

As a Windows user, I sometimes notice sites that aren’t tested on Windows. One of the problems is that you might see a scrollbar appear somewhere for no reason! On MacOs, the scroll bar is hidden by default when you do not scroll the page. They also take up no viewport space, which means that 100% of the body width equals 100% of the screen width. But in Windows, the width of the scroll bar is subtracted from the width of the window. Browsers that do not provide scrollbars vary in width, but are typically 17px wide.

Here are two situations I’ve encountered recently:

1. When using vm units

Vw units are defined in the specification as follows:

The viewport-percentage lengths are calculated relative to the size of the initial containing blocks. […]. But let’s assume that the scrollbar doesn’t exist.

I made it very clear that the scrollbar doesn’t affect vw units.

In the screenshot below, the div is set to 100vw wide. As you can see, there are two problems with vertical scrollbars.

First, the div is too wide, poking the horizontal scroll bar out; Second, because vertical scrollbars are present, paragraph text is clipped by the default without horizontal scrollbars.

.container {
  width: 100vw;
}
Copy the code

2. When the Fixed dialog box is displayed

When I implement pop-ups, I usually specify a width for pop-ups and overflow: auto; Style. This way, if the popup is full of content, the user can scroll through the content. But the user can also use the Close button to close the popup, but I want the close button to be visible as I scroll. So in the popup I’m going to close the button position: Fixed; .

Here’s what I want to achieve. In the absence of the scroll bar, everything is fine.

This is the style used for the close button:

.close {
  position: fixed;
  top: 40px;
  right: 40px;
}
Copy the code

When there are a lot of pop-ups. When the scroll bar appears, the alignment of the close button is not perfect because the left offset of the button is relative to the viewport. This makes it look like the offset on the left side is smaller than the offset on the top.

The solution

After I learned about CSS custom properties (also known as CSS variables), IT occurred to me that I could declare a variable to store scroll bar widths. That way, I can continue to use VW to locate elements without worrying about whether it’s on a Mac or Windows.

First you need to calculate the scroll bar width. I created a gadget function that uses a temporary element created by JavaScript to get the scrollbar width and return it.

const getScrollbarWidth = (a)= > {
  // Create a temporary div container and append it into the body
  const container = document.createElement('div');
  // Append the container in the body
  document.body.appendChild(container);
  // Force scrollbar on the container
  container.style.overflow = 'scroll';

  // Add ad fake div inside the container
  const inner = document.createElement('div');
  container.appendChild(inner);

  // Calculate the width based on the container width minus its child width
  const width = container.offsetWidth - inner.offsetWidth;
  // Remove the container from the body
  document.body.removeChild(container);

  return width;
};

// Get the scrollbar dimension
const scrollbarWidth = getScrollbarWidth();
// Set a custom property with the value we calculated
document.documentElement.style.setProperty('--scrollbar'.`${scrollbarWidth}px`);
Copy the code

In CSS, I create a default variable in case Javascript is not enabled or triggers an error.

:root {
  --scrollbar: 0px;
}
Copy the code

Now we have a variable that contains the width of the browser scroll bar, and we can use it directly in CSS!

.container {
  width: 100vw; /* Fallback for old browsers */
  width: calc(100vw - var(--scrollbar));
}
Copy the code

Here’s what the close button looks like:

.close {
  position: fixed;
  top: 40px;
  right: 40px; /* Fallback for old browsers */
  right: calc(40px + var(--scrollbar));
}
Copy the code

I hope this article helps with your project! Don’t forget to test your site on a Windows PC at 🤭

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)