diff --git a/packages/fineui/src/core/utils/dom.js b/packages/fineui/src/core/utils/dom.js index 275aa3adf..65b746600 100644 --- a/packages/fineui/src/core/utils/dom.js +++ b/packages/fineui/src/core/utils/dom.js @@ -2,7 +2,7 @@ * 对DOM操作的通用函数 */ import $ from "jquery"; -import { each, isEmpty, isNotNull, isNull } from "../2.base"; +import { each, isEmpty, isNotEmptyObject, isNull } from "../2.base"; import { Widget } from "../4.widget"; import { isIE } from "./../platform"; @@ -102,23 +102,37 @@ export function getTextSizeHeight(text, fontSize = 12) { } // 获取滚动条的宽度,页面display: none时候获取到的为0 -let _scrollWidth = null; +const _scrollWidthMap = {}; export function getScrollWidth(css) { - if (isNull(_scrollWidth) || isNotNull(css) || _scrollWidth === 0) { - const ul = Widget._renderEngine.createElement("
").width(50).height(50) + /** + * 指定 scrollbar-width: none; + * 支持的浏览器版本结果肯定为 0,无需重复计算 + */ + const supportScrollWidth = 'scrollbarWidth' in document.documentElement.style; + const hasNoneScrollWidth = + supportScrollWidth && isNotEmptyObject(css) && [css["scrollbar-width"], css["scrollbarWidth"]].includes("none"); + const key = JSON.stringify(css) || "default"; + + if (hasNoneScrollWidth) { + return 0; + } else if (isNull(_scrollWidthMap[key])) { + const ul = Widget._renderEngine + .createElement("
") + .width(50) + .height(50) .css({ position: "absolute", top: "-9999px", overflow: "scroll", - ...css + ...css, }) .appendTo("body"); - _scrollWidth = ul[0].offsetWidth - ul[0].clientWidth; + _scrollWidthMap[key] = ul[0].offsetWidth - ul[0].clientWidth; ul.destroy(); } - return _scrollWidth; + return _scrollWidthMap[key]; } export function getImage(param, fillStyle, backgroundColor) {