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.