Overflow-x：滚动在Chrome浏览器上不起作用(滚动条不随网格内容移动)

tyg4sfes 于 2023-10-14 发布在 Go

关注(0)|答案(1)|浏览(328)

我用ag-grid定义了一个带有水平滚动条的网格。当我单击左侧或右侧的分隔符时，只有滚动条移动，而网格内容不移动。Chrome、Edge出现问题。
它不适用于我尝试的任何CSS样式。此外，我写了浏览器特定的代码，但它没有工作。滚动条应随网格内容沿着移动
这是我的Grid.html文件，我使用ag-grid文档作为参考来创建下面的数据网格
'''

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>My Data Grid</title>
        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>

    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
    
    <link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
  </head>
  <body>
        <div id="myGrid" class="ag-theme-alpine" style="height: 500px"></div>
    <script type="text/javascript">
        const columnDefs = [
                            { field: "SerialNo" },
                            { field: "Name" },
                            { field: "Project" },
                            { field: "JoiningDate" },
                            { field: "JobRole" },
                            { field: "RoleBand" },
                            { field: "EmployeeType" },
                            { field: "Contact" },
                            { field: "ReportingManager" }
                           ];

                const rowData = [
                        { SerialNo: 1, Name: "A", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "Associate" , RoleBand: "RB7" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 2, Name: "B", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "QA" , RoleBand: "RB6" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 3, Name: "C", Project: "Del200", JoiningDate: "DD-MM-YY" , JobRole: "Developer" , RoleBand: "RB5" , EmployeeType: "Contract" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 4, Name: "D", Project: "Del500", JoiningDate: "DD-MM-YY" , JobRole: "Associate" , RoleBand: "RB7" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 5, Name: "E", Project: "Del110", JoiningDate: "DD-MM-YY" , JobRole: "Associate" , RoleBand: "RB7" , EmployeeType: "Part-Time" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 6, Name: "F", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "Developer" , RoleBand: "RB5" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 7, Name: "G", Project: "Del110", JoiningDate: "DD-MM-YY" , JobRole: "Automation" , RoleBand: "RB4" , EmployeeType: "Contract" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 8, Name: "H", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "Developer" , RoleBand: "RB5" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 9, Name: "I", Project: "Del110", JoiningDate: "DD-MM-YY" , JobRole: "Automation" , RoleBand: "RB4" , EmployeeType: "Contract" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 10, Name: "J", Project: "Del200", JoiningDate: "DD-MM-YY" , JobRole: "QA" , RoleBand: "RB6" , EmployeeType: "Contract" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 11, Name: "K", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "Developer" , RoleBand: "RB5" , EmployeeType: "Part-Time" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 12, Name: "L", Project: "Del300", JoiningDate: "DD-MM-YY" , JobRole: "Automation" , RoleBand: "RB4" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        { SerialNo: 13, Name: "M", Project: "Del300", JoiningDate: "DD-MM-YY" , JobRole: "QA" , RoleBand: "RB6" , EmployeeType: "Part-Time" , Contact: "xxxxxx" , ReportingManager: "xyz" },
                        
                        ];

        
        const gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData,

          
          defaultColDef: {sortable: true, filter: true},

          rowSelection: 'multiple', 
          animateRows: true, 

          
          onCellClicked: params => {
            alert('cell was clicked', params)
          }
        };

        
        const eGridDiv = document.getElementById("myGrid");
        
        new agGrid.Grid(eGridDiv, gridOptions);
    </script>
  </body>
</html>

'''
任何建议都会对我有帮助

google-chrome

来源：https://stackoverflow.com/questions/77237758/overflow-xscroll-is-not-working-on-chrome-browser-scroll-bar-does-not-move-wit

1条答案

按热度按时间

w8biq8rn1#

如果没有重新制作代码，我们很难帮助您。但你可以试试：
1.为网格容器设置overflow-x auto：

.container {   overflow-x: auto; }

1.将domLayout更改为“autoHeight”：

gridOptions: {   
    domLayout: 'autoHeight', // or 'autoHeight,pagination' if using pagination   
    // Other grid options... 
}

赞(0）回复(0）举报 2023-10-14

我来回答

Overflow-x：滚动在Chrome浏览器上不起作用(滚动条不随网格内容移动)

1条答案

相关问题

热门标签

最新问答