ToastUI Grid垂直滚动异常，求CSS/JS强制修复方案

我在项目中使用ToastUI Grid组件时遇到问题：鼠标在网格内部时无法触发垂直滚动，移出网格后滚动功能正常。已在官方GitHub仓库提交Issue但未收到回复，希望通过JavaScript或CSS强制实现垂直滚动。

相关代码 #

初始化代码：

const grid = new Grid({
    el: document.getElementById('grid2'),
    data: gridData,
    // ... 其他配置
});

网格DOM结构：

<div id="grid2">
    <div data-grid-id="1" class="tui-grid-container tui-grid-show-lside-area" style="width: 100%;">
        <!-- 网格内部元素 -->
    </div>
</div>

更新：已添加在线可运行示例。

解决方法 #

方案1：CSS强制开启滚动

ToastUI Grid可能通过内部样式禁用了容器的滚动行为，或者内部元素阻止了指针事件。可以尝试添加以下CSS：

/* 强制网格容器显示垂直滚动条并允许滚动 */
.tui-grid-container {
    overflow-y: auto !important;
    pointer-events: auto !important;
}

/* 如果是单元格等内部元素捕获了滚轮事件，放开限制 */
.tui-grid-container .tui-grid-cell {
    pointer-events: none !important;
}

方案2：JavaScript手动处理滚动事件

如果是组件内部阻止了滚轮默认事件，可以监听容器的滚轮事件，手动控制滚动：

const gridContainer = document.querySelector('.tui-grid-container');

gridContainer.addEventListener('wheel', function(e) {
    // 阻止默认行为避免组件干扰
    e.preventDefault();
    // 手动更新滚动位置
    this.scrollTop += e.deltaY;
    // 如果需要水平滚动也处理，可添加：this.scrollLeft += e.deltaX;
});

额外排查点

• 检查网格容器是否设置了固定高度，无高度则不会出现滚动条
• 确认是否有自定义编辑器或自定义事件监听覆盖了滚轮行为

内容的提问来源于stack exchange，提问作者schutte