角度用户界面网格垂直滚动水平滚动时向上移动

Question

我正在使用 Angular UI 网格，面临这个问题，

当垂直滚动条最后滚动到底部时，如果尝试将水平滚动条移动到右上角，垂直滚动条会向上移动

请参阅此以获取更多信息：https://github.com/angular-ui/ui-grid/issues/6981

有解决方法可以解决这个问题吗

可以在这里尝试上述问题：http://ui-grid.info/docs/#!/tutorial/Tutorial:%20213%20Auto-Resizing

我发现当水平滚动到右侧时，行内边距会应用于行，当我尝试将该边距设置为 0 时，我观察到网格左侧的空白

附加信息：如果我增加整个网格的宽度，我不会看到这个问题，但是列的大小是可调整的，如果用户尝试调整列的大小（增加大小）并再次尝试上述步骤，它就会重现。

Answer 1

1. 调查根本原因：

仔细检查提供的 GitHub 问题 (https://github.com/angular-ui/ui-grid/issues/6981)，看看社区或开发人员是否建议任何已知的解决方案或解决方法。 考虑调试您的特定实现，以识别水平滚动和可能导致跳转的其他 UI 元素之间的任何潜在冲突或交互。 2. 潜在的解决方法：

a) 禁用虚拟滚动（如果适用）：

如果您使用虚拟滚动，请尝试暂时禁用它，看看是否可以解决问题。虚拟滚动有时会在特定场景中引入意外行为。您可以通过将网格选项的enableVirtualScrolling 属性设置为false 来禁用它。 b) 以编程方式管理水平滚动（谨慎考虑）：

这种方法涉及当垂直滚动位于底部时手动控制水平滚动位置。然而，它需要仔细实施，并且可能会导致意想不到的副作用。这是一个总体想法：

JavaScript

//Example using a custom directive or service
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { IGridOption } from 'angular-ui-grid';

@Directive({
  selector: '[appFixVerticalScroll]'
})
export class FixVerticalScrollDirective {
  @Input() gridOptions: IGridOption; // Reference to your grid options

  constructor(private el: ElementRef) {}

  @HostListener('scroll', ['$event'])
  onScroll(event: any) {
    const gridElement = this.el.nativeElement;
    if (gridElement.scrollTop === gridElement.scrollHeight) {
      // Vertical scroll is at bottom
      gridElement.scrollLeft = 0; // Reset horizontal scroll to left
    }
  }
}

谨慎使用代码。 将此指令应用于您的网格元素： HTML

    <ui-grid ui-grid="gridOptions" appFixVerticalScroll 
 [gridOptions]="gridOptions">
    </ui-grid>

谨慎使用代码。 c) 考虑第三方网格库（可选）：

如果上述解决方法不起作用或证明太复杂，请探索替代网格库，它们可能会更好地处理组合的水平和垂直滚动行为。进行研究以找到符合您的项目要求和兼容性需求的库。 3.调试技巧：

使用浏览器开发者工具检查发生垂直滚动跳转时网格元素的内容和样式。检查是否存在任何可能导致问题的意外边距、填充或溢出。 尝试通过创建一个最小的可重现示例来隔离问题。这可以帮助缩小原因并使调试更容易。 4. 其他注意事项：

更新到最新版本的 Angular UI Grid，以受益于与滚动行为相关的任何错误修复或改进。