javascript - 固定标题和第一列的水平和垂直滚动

标签 javascript html css

我已经在 StackOverflow 上搜索过了。没有涵盖这种情况的答案。通常,它要么是水平的,要么是垂直的,这个例子是水平的、垂直的和卡住的行和卡住的列。

基本上,我有 3 个元素。 一个中间有图表的 div,一个左边有名字的 div 和一个有日期标题的 div。 左边有名字的表是固定的。 (卡住列) 标题应保持固定但可滚动(卡住行)。 并且图表应该能够垂直和水平滚动。

我在一些帮助下设法实现了垂直滚动,但我终究无法弄清楚为什么没有水平滚动。

这是 fiddle :

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {id: 'team', label: 'Team', type: 'string'},
      {id: 'start', label: 'Season Start Date', type: 'date'},
      {id: 'end', label: 'Season End Date', type: 'date'}
    ],
    rows: [
      {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
      {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
      {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers3'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints2'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers4'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots5'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers6'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots7'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots8'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers9'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
          {c: [{v: 'New York Giants10'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers11'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints12'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers13'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers14'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots15'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers16'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots17'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots18'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers19'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
    ]
  });

  var group = google.visualization.data.group(
    data,
    [0, 1],
    [{
      column: 0,
      type: 'number',
      label: data.getColumnLabel(0),
      aggregation: google.visualization.data.count
    }]
  );
  group.sort([{column: 1}]);

  var rowLabels = [];
  var rowElements = [];
  var labels = document.getElementById('labels');
  for (var i = 0; i < group.getNumberOfRows(); i++) {
    var team = group.getValue(i, 0);
    if (rowLabels.indexOf(team) === -1) {
      rowLabels.push(team);
      var label = labels.appendChild(document.createElement('div'));
      label.className = 'label';
      label.innerHTML = team;
      rowElements.push(label);
    }
  }

  var options = {
    height: 1300,
    timeline: {
      groupByRowLabel: true,
      showRowLabels: false
    },
    width: 1800
  };

  var container = document.getElementById('chart');
  var chart = new google.visualization.Timeline(container);
  google.visualization.events.addListener(chart, 'ready', afterDraw);
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });

  function afterDraw() {
    var header = document.getElementById('header');
    header.innerHTML = '';
    var svg = document.getElementsByTagName('svg')[0];
    var g = svg.getElementsByTagName('g')[1];
    var svgNew = header.appendChild(svg.cloneNode());
    var gNew = svgNew.appendChild(g.cloneNode(true));
    var height = parseFloat(gNew.getElementsByTagName('text')[0].getAttribute('y')) - 25;
    gNew.setAttribute('transform','translate(0,-'+height+')');
    g.parentNode.removeChild(g);

    var rows = container.getElementsByTagName('rect');
    var rowIndex = -1;
    Array.prototype.forEach.call(rows, function(rect) {
      if (rect.getAttribute('x') === '0') {
        rowIndex++;
        if (rowIndex < rowElements.length) {
          var rowHeight = (parseFloat(rect.getAttribute('height')) - 1) + 'px';
          rowElements[rowIndex].style.height = rowHeight;
          rowElements[rowIndex].style.lineHeight = rowHeight;
        }
      }
    });
  }
});
#header {
  height: 56px;
 
  position: fixed;
  -webkit-overflow-scrolling: touch;
  display: block;
  top: 0px;
  margin-top: 0px;
  z-index: 99;
  background: white;
  
}

#chart {
  -webkit-overflow-scrolling: touch;
  margin-top: 57px;
  
}


#labels {
  border: 1px solid #b7b7b7;
  margin-top: 56px;
}

.label {
  border-top: 1px solid #b7b7b7;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}

.label:first-child {
  border: none;
}

.label:nth-child(even) {
	background-color: #e6e6e6;
}

.label:nth-child(odd) {
	background-color: #ffffff;
}

.scroll {
  max-width: 100%;
   -webkit-overflow-scrolling: touch;
   height: 100%;
  overflow-y: scroll;
}

.inline {
  display: inline-block;
  vertical-align: top;
 -webkit-overflow-scrolling: touch;
  
}

.nowrap {
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden; 
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="nowrap">
  <div class="inline" id="labels"></div>
  <div class="inline scroll">
    <div id="header"></div>
    <div id="chart"></div>
  </div>
</div>

这是一个代码笔: https://codepen.io/anon/pen/bZmKpo

最佳答案

检查水平和垂直滚动的这个简单示例。我已经修复了一个将位于中心位置的 div

.sample{
  height: 30em;
  width:  70em;
  overflow:scroll;
}

.data{
    position: fixed;
    top: 50%;
    margin: auto;
    text-align: center;
    right: 31%;
    background:green;
}
<div id='entry'>
<label id="id" class="data">This is example to scroll fixed div</label>
</div>

<div class="sample">Normal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal DivNormal Div</div>

关于javascript - 固定标题和第一列的水平和垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55338675/

相关文章:

javascript - 在 React 中创建悬停工具提示

javascript - 在javascript中如何调用另一个函数 block 中的函数?

javascript - 在 Google 图表中动态加载行和列

templates - 用于网络应用的 HTML5/CSS3 模板

html - 仅基于屏幕宽度和窗口宽度的动态定位

javascript - Angular 搜索对象数组

javascript - ng-options 中的值属性不是正确的数据类型

javascript - 通过按钮更改 <p> 之间的文本

html - 如何阻止 Google 索引网站?

html - 向右移动元素但保持它们在 HTML 中的顺序?