Question

我试图创建一个包含可变数量的行和列的简单日历组件。每行和每列都有一个最小的高度/宽度，因此滚动条应该可以在它不适合屏幕时出现。

我希望标题（显示日期和资源）和侧边栏（显示小时数）始终可见。

我在Chrome的以下示例中完美地运用了它： http://plnkr.co/2zCEiY9ssLCWLXY3teBN

HTML：

  <body onload="init()">
    <div id="grid">
      <div id="corner"></div>
      <div id="head"></div>
      <div id="side"></div>
      <div id="content"></div>
    </div>
  </body>

使用Javascript：

function init() {
  var grid = document.getElementById("grid");
  var corner = document.getElementById("corner");
  var head = document.getElementById("head");
  var side = document.getElementById("side");
  grid.addEventListener("scroll", function(event) {
    corner.style.top = grid.scrollTop+'px';
    corner.style.left = grid.scrollLeft+'px';
    head.style.top = grid.scrollTop+'px';
    side.style.left = grid.scrollLeft+'px';
  });
}

CSS：

* {
  box-sizing: border-box;
}

body {
  width: 700px;
  height: 700px;
  border: 1px solid black;
}

#grid {
  position: relative;
  width: 100%;
  height: 100%;
  background: purple;
  overflow: auto;
}

#corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: white;
  border: 1px solid black;
  z-index: 200;
}

#head {
  position: absolute;
  top: 0;
  left: 100px;
  height: 100px;
  width: 1000px;
  background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
  border: 1px solid black;
  z-index: 100;
}

#side {
  position: absolute;
  top: 100px;
  left: 0;
  height: 1000px;
  width: 100px;
  background: linear-gradient(135deg, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
  border: 1px solid black;
  z-index: 100;
}

#content {
  width: 1000px;
  height: 1000px;
  margin-left: 100px;
  margin-top: 100px;
  background: linear-gradient(135deg, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  border: 1px solid black;
}

但是，当我在IE11或firefox中打开此示例时，使用鼠标滚轮滚动时标题会抖动。（拖动滚动条似乎很好）这似乎是浏览器的平滑滚动功能的问题。

我可以收听滚动事件并阻止默认行为并手动滚动内容。这基本上会阻止所有浏览器的平滑滚动。但是，如果有一个不能做到这一点的解决方案会很好。

简而言之，我希望上面链接中的示例能够在IE中正常工作。使用鼠标滚轮滚动时没有抖动标题。

具有固定和对齐标题和侧边栏的可滚动内容

0 个答案: