Fixed a bug caused by scrollbar occupying space

background

This bug was caused by滾動條占據空間. I checked some information and finally solved it. By the way, I studied this property, made a summary, and shared it with you.

text

Yesterday, a tester raised a problem. The phenomenon was that聚焦提示偏了. Let me fix it, as shown below:

At first I thought the red box was in the wrong position, so I looked for the code:

<Input
  // ...
  onFocus={() => setFocusedInputName('guidePrice')}
  onBlur={() => setFocusedInputName('')}
/>

<Table
  data-focused-column={focusedInputName}
  // ...
/>

There is nothing wrong with the code, it is not set manually, and it works OK on mine, another colleague, and the PM's PC:

The initial judgment is that there is a difference in the red box position settlement, the difference is about 17px, but how did this difference come about?

I went to the tester's PC and noticed a detail. On my PC, the scroll bar was suspended:

On his PC, the scroll bar takes up space:

On his computer, he manually changed the original overscroll-y: scroll overscroll-y: overlay the problem was solved.

Therefore, it is determined that the bug is caused by滾動條占據空間.

overscroll-y: overlay

The overflow CSS property defines what to do when the content of an element is too large to fit in a block formatting context. It is a shorthand property for overflow-x and overflow-y.

/* default value. The content will not be trimmed and will be rendered outside the element box*/
overflow: visible;

/* The content will be trimmed and the rest of the content will not be visible */
overflow: hidden;

/* The content will be trimmed and the browser will display a scroll bar to view the remaining content */
overflow: scroll;

/* Determined by the browser, if the content is clipped, a scroll bar will be shown */
overflow:auto;

/* Specifies that the overflow attribute value is inherited from the parent element*/
overflow: inherit;

Official description:

overlay behaves the same as auto , but the scrollbars are drawn on top of the content instead of taking up space. Only supported in WebKit-based (e.g., Safari ) and Blink-based (e.g., Chrome or Opera ) browsers.

Performance:

html {
  overflow-y: overlay;
}

compatibility

I did not find compatibility for this property on caniuse, and someone also raised this question:

Problem scenarios and solutions

1. Scrollbar of the outer container

The external container here refers to HTML, which is added directly to the outermost layer:

html {
  overflow-y: scroll;
}

By adding this feature manually, there is always scroll width space occupied.

Disadvantages: There is a scroll bar even when there is no scrolling, which is not very beautiful.

Advantages: Convenient, no compatibility issues.

2. External container absolute positioning method

Using absolute positioning ensures that the width of the body always maintains the full space:

html {
  overflow-y: scroll; // compatible with ie8, not support: root, vw
}

:root {
  overflow-y: auto;
  overflow-x:hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

3. Internal container compatibility

.wrapper {
    overflow-y: scroll; // fallback
    overflow-y: overlay;
}

Summarize

My personal recommendation is to use overlay , and then use scroll as a backup.

That’s all the content. I hope it can be inspiring to you.

If there are any errors in the article, please point them out in the comment section, thank you.

References

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

https://github.com/Fyrd/caniuse/issues/4027

This is the end of this article about fixing a bug caused by the scrollbar occupying space. For more information about bugs caused by the scrollbar occupying space, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!