angular - 滚动 ag-grid 时，标题会向相反的方向移动

Question

滚动 ag-grid 时，标题会朝相反的方向移动。

仅在使用 RTL 网格时会发生这种情况

请参阅附件。

标签： angularag-gridag-grid-angular

Answer 1

这个 bug 再次出现在 Chrome 85 上（因为 chrome 改变了 RTL 计算布局）

Chrome 85 更新打破了 ag-grid ui 并在 RTL 中滚动

Ag-Grid 已在 24.0.0 版上修复

旧版本21.2.2之类的更改文件路径Utils.ts和使用代码

在上面创建 agGrid.ts/src/agGrid.ts并复制下面的代码片段

/**
 * RTL scrolling breaks with Chrome 85
 * Fix Version: 24.0.0
 * File: https://github.com/ag-grid/ag-grid/blob/master/community-modules/core/src/ts/utils/dom.ts
 * commit: https://github.com/ag-grid/ag-grid/commit/acffa118e0c705d17786377bd43a9fca247cdf72
 */

import { Utils } from "ag-grid-community/dist/lib/utils/general";

let rtlNegativeScroll: boolean;
export function isRtlNegativeScroll(): boolean {
    if (typeof rtlNegativeScroll === "boolean") {
        return rtlNegativeScroll;
    }

    const template = document.createElement("div");
    template.style.direction = "rtl";
    template.style.width = "1px";
    template.style.height = "1px";
    template.style.position = "fixed";
    template.style.top = "0px";
    template.style.overflow = "hidden";
    template.dir = "rtl";
    template.innerHTML = /* html */
        `<div style="width: 2px">
            <span style="display: inline-block; width: 1px"></span>
            <span style="display: inline-block; width: 1px"></span>
        </div>`;

    document.body.appendChild(template);

    template.scrollLeft = 1;
    rtlNegativeScroll = template.scrollLeft === 0;
    document.body.removeChild(template);

    return rtlNegativeScroll;
}

Utils.setScrollLeft = (element: HTMLElement, value: number, rtl: boolean): void => {
    if (rtl) {
        // Chrome and Safari when doing RTL have the END position of the scroll as zero, not the start
        if (isRtlNegativeScroll()) {
            value *= -1;
        } else if (Utils.isBrowserSafari() || Utils.isBrowserChrome()) {
            value = element.scrollWidth - element.clientWidth - value;
        }
    }
    element.scrollLeft = value;
};
Utils.getScrollLeft = (element: HTMLElement, rtl: boolean): number => {
    let scrollLeft = element.scrollLeft;

    if (rtl) {
        // Absolute value - for FF that reports RTL scrolls in negative numbers
        scrollLeft = Math.abs(scrollLeft);

        if (Utils.isBrowserChrome() && !isRtlNegativeScroll()) {
            scrollLeft = element.scrollWidth - element.clientWidth - scrollLeft;
        }
    }

    return scrollLeft;
};

将片段导入到main.ts

import "./agGrid";