Table 中如何修改scrollbarwidth的宽度，

[christingliu]

Description

设置fixed固定列，但是想要调整全局的滚动条展示宽度和高度,getScrollBarWidth 方法
let scrollBarWidth: ?number;

export function getScrollBarWidth(): ?number {
if (scrollBarWidth !== undefined) return scrollBarWidth;
const dom = _document.createElement('div');
const body = _document.body || dom;

dom.style.visibility = 'hidden';
dom.style.width = '100px';
dom.style.position = 'absolute';
dom.style.top = '-9999px';
dom.style.overflow = 'scroll';

body.appendChild(dom);

const totalWidth = dom.offsetWidth;
const widthWithoutScroll = dom.clientWidth;

body.removeChild(dom);

return totalWidth - widthWithoutScroll;
}

Reproduce Steps

1. [First Step]
2. [Second Step]
3. [and so on...]

Error Trace (if possible)

scrollBarWidth 这个宽度虽然定义了变量，但是在代码里未找到赋值这个变量的地方。那if的判断是不是没有用那。

Solution

同样的问题在elementUI，vue框架里面的方法
import Vue from 'vue';

let scrollBarWidth;

export default function() {
if (Vue.prototype.$isServer) return 0;
if (scrollBarWidth !== undefined) return scrollBarWidth;

const outer = document.createElement('div');
outer.className = 'el-scrollbar__wrap';
outer.style.visibility = 'hidden';
outer.style.width = '100px';
outer.style.position = 'absolute';
outer.style.top = '-9999px';
document.body.appendChild(outer);

const widthNoScroll = outer.offsetWidth;
outer.style.overflow = 'scroll';

const inner = document.createElement('div');
inner.style.width = '100%';
outer.appendChild(inner);

const widthWithScroll = inner.offsetWidth;
outer.parentNode.removeChild(outer);
scrollBarWidth = widthNoScroll - widthWithScroll;

return scrollBarWidth;
};
区别在于加入了一个className='el-scrollbar__wrap'。element-react里是否也可以添加上这样一个类名。这样可以方便外层调整element-table的fix 固定列滚动条的宽度。

Additional Information

Any additional information, configuration or data that might be necessary to reproduce the issue.