After the fixed column function of the table component GridManager was published, a user submitted issues through Github and reported that he found a table header dislocation BUG in Firefox.

Trying to reason

After debugging, it was found that the following code was configured in the component:

::-webkit-scrollbar {
	background: transparent;
	width: 10px;
	height: 10px;
}
Copy the code

However, Firefox does not support the -webkit-ScrollBar property, so the y-scroll bar is 17px wide in Windows.

This doesn’t happen with Firefox on The MAC because the scroll axis is floating.

Solving steps

While the hardest part of programming is finding trouble spots, it is often a form of self-soothing.

Finding alternative styles

This is definitely the best solution, assuming firefox has the -Moz-Scrollbar property.

I spent a lot of time at the front end, and I didn’t find a viable CSS solution.

In almost to use JS to achieve a simulation of the scrollbar, I thought of another solution: dynamic access to the scroll axis width through JS.

Dynamically get scroll axis width

export const getScrollBarWidth = _= > {
    const el = document.createElement('div');

    el.style.width = '100px';
    el.style.height = '100px';
    el.style.overflow = 'scroll';

    getDiv(_).get(0).appendChild(el); // getDiv is an internal component method. If you need to use this code, you can replace getDiv(_).get(0) with another DOM node

    const width = el.offsetWidth - el.clientWidth;

    // Remove the added element
    el.remove();
    return width;
};
Copy the code

When the height reaches the Y-axis display condition, the column width is dynamically adjusted using the width value obtained by getScrollBarWidth().

At this point, the BUG is fixed.

But there’s still one problem: There’s still a difference between Chrome’s scroll axis and Firefox’s.

Look again for alternative styles

It is well known that the Windows scroll bar is not a simple ugly word can be summed up.

Scrollbar-width and scrollbar-color were eventually found on MDN, and the styling problem was solved with these two properties.

  • Scrollbar-width: used to adjust the width of the Firefox scroll axis. There are only three options. Custom pixel values are not supported.
  • Scrollbar-color: Used to adjust the color of the Firefox scroll axis. Supports custom color values.
.table-div{// firefox modify the scrollbar: < width: thin; scrollbar-color: #e1e1e1 #f3f3f3; }Copy the code

After adding the styles, I tested Chrome and Firefox on Windows and MAC respectively, and found that the scroll styles were roughly the same.

However, since scrollbar-width: thin was added to the style, the tool function getScrollBarWidth() that was written earlier does not match the actual width (17px, but 8px) in Firefox.

At this point it’s easy to change, just add el.style.scrollbarWidth = ‘thin’ to getScrollBarWidth to keep the function in sync with the style.

Write in the last

Gridmanager was launched in early 2015 and now supports angular-1. X, React, Vue, jQuery and native encoding.

Fast and flexible Table label instantiation, make the Table label full of vitality.

  • Click to see the API
  • Click to view source code