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

【问题标题】：When scrolling the ag-grid the header goes to the opposite direction滚动 ag-grid 时，标题会向相反的方向移动
【发布时间】：2020-10-22 17:42:20
【问题描述】：

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

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

请看附件。

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

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

Chrome 85 Update breaks the ag-grid ui and scroll in RTL

Ag-Grid 已在 24.0.0 版本中修复

21.2.2等旧版本更改Utils.ts文件路径及使用代码

在/src/agGrid.ts上创建agGrid.ts并复制到sn-p下面

/**
 * 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;
};

将 sn-p 导入到main.ts

import "./agGrid";

【讨论】：