javascript - 滚动为电子表格

Question

我有这个 JSFiddle:https://jsfiddle.net/valentincreative/09xnc82h/11/ .

CSS:

body {
 background-color: #fff;
}

.mask {
 position: absolute;
 background-color: #fff;
 top: 0;
 left: 0;
}

.container {
 width: 100%;
 height: 100%;
 position: absolute;
 display: flex;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 overflow: scroll;
}

.sidebar,
.header {
  position: fixed;
  left: 0;
  top: 0;
  background-color: #fff;
}

.shadow {
 box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.header {
 width: 100%;
}

.sidebar {
}

.content {
 width: 100%;
}


table {
 table-layout: fixed;
}

td, th {
 width: 50px;
 text-align: center;
 border: 0;
 padding: 8px;
}

tr {
 &:nth-of-type(2n) {
  background-color: #eee;
 }
}

JS:

content.style.marginTop  = headerHeight + 'px';
content.style.marginLeft = sidebarWidth + 'px';
sidebar.style.paddingTop = headerHeight + 'px';
header.style.paddingLeft = sidebarWidth + 'px';
mask.style.width         = (sidebarWidth + 4) + 'px';
mask.style.height        = headerHeight + 'px';

container.onscroll = function(e) {
 header.style.transform  = 'translateX(-' + container.scrollLeft + 'px)';
 sidebar.style.transform = 'translateY(-' + container.scrollTop + 'px)';

 if (container.scrollLeft > 5 && !sidebar.classList.contains('shadow')) {
  sidebar.classList.add('shadow');
 }

 if (container.scrollLeft < 5) {
  sidebar.classList.remove('shadow');
 }

 if (container.scrollTop > 5 && !header.classList.contains('shadow')) {
  header.classList.add('shadow');
 }

 if (container.scrollTop < 5) {
  header.classList.remove('shadow');
 }
}

目前，只有内容滚动可以按我的意愿工作。当我在页眉和侧边栏中滚动时，没有任何反应。

所以，我想添加这两个行为:

• 当我在边栏中垂直滚动时:内容也会垂直滚动
• 当我在标题中水平滚动时:内容也水平滚动

我想要一个类似于 google sheet 的结果。

注意:我只想保留两个滚动条，一个在页面底部，一个在右侧。

注意 2:页眉和侧边栏必须始终可见。

Answer 1

替换你的CSS:

.sidebar,
.header {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
 }

有了这个:

.sidebar,
.header {
    position: absolute;
    top: 0;
    left: 0;
    overflow: scroll;
    background-color: #fff;
}

更新 fiddle : https://jsfiddle.net/valentincreative/09xnc82h/11/