小编Blu*_*dev的帖子

Chrome中的CSS网格布局似乎无法正常运行超过1000行

我使用"CSS Grid Layout"和"sticky position"技术创建了一个带有固定标题的滑动网格示例.为方便起见,网格的内容是由脚本生成的,我觉得它很好用.

function fillGrid(selector, rows) {
  let cols = 3;
  let grid = $(selector);
  
  grid.empty();
  
  //cr header
  grid.append($('<div>').addClass('hcr').text('#'));
  
  //col headers
  for (let c = 1; c <= cols; c++) {
    grid.append($('<div>').addClass('hc').text(`Column ${c}`));
  }
  
  for (let r = 1; r <= rows; r++) {
    //row header
    grid.append($('<div>').addClass('hr').text(r));
    
    //cells
    for (let c = 1; c <= cols; c++) {
      grid.append($('<div>').addClass('c').text(`Cell ${r}-${c}`));
    }
  }
}

$('#reload').click(e => {
  var rows = Number.parseInt($('#rows').val());
  fillGrid('#grid1', rows);
})

$(document).ready(function() {
  fillGrid('#grid1', 10);
});

Run Code Online (Sandbox Code Playgroud)