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

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

javascript html css

Javascript 具有固定和对齐的标题和侧边栏的可滚动内容,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个简单的日历组件，其中包含可变数量的行和列。不过，每一行和每一列都有一个最小的高度/宽度，因此当滚动条不适合屏幕时，滚动条应该可以出现我希望标题（显示天数和资源）和侧边栏（显示小时）始终可见我在Chrome的以下示例中实现了完美的工作： HTML: CSS: 然而，当我在IE11或firefox中打开这个示例时，当使用鼠标滚轮滚动时，标题会抖动。（拖动滚动条似乎很好）这似乎是浏览器平滑滚动功能的问题我可以监听滚动事件，阻止默认行为并手动滚动内容。这将基本上防止在所有浏览器

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

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

我在Chrome的以下示例中实现了完美的工作：

HTML:

CSS:

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

我可以监听滚动事件，阻止默认行为并手动滚动内容。这将基本上防止在所有浏览器中平滑滚动。不过，如果有一个解决方案不能做到这一点，那就太好了

因此，简而言之，我希望上面链接中的示例在IE中正常工作。使用鼠标滚轮滚动时不会出现抖动标题。

为什么要使事情复杂化，只需使用位置固定。固定位置的问题是元素在视口中是固定的。我不想那样。我希望他们留在“内容”分区旁边，即使你想滚动整个网页，而不仅仅是“内容”分区。另外，给边栏一个固定的位置，阻止它上下滚动。我想让它保持在左边，而不是阻止它上下滚动。与标题类似，我希望它保持在顶部，并保持左右滚动。为什么要使事情复杂化，只需使用位置固定。固定位置的问题是元素在视口中是固定的。我不想那样。我希望他们留在“内容”分区旁边，即使你想滚动整个网页，而不仅仅是“内容”分区。另外，给边栏一个固定的位置，阻止它上下滚动。我想让它保持在左边，而不是阻止它上下滚动。与标题类似，我希望它保持在顶部，并保持左右滚动。

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

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';
  });
}

* {
  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;
}