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

目前，只有内容滚动可以正常工作。当我在标题和侧边栏中滚动时，没有任何事情发生。

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

当我在侧边栏中垂直滚动：内容也垂直滚动
当我在标题中水平滚动时：内容也水平滚动

我想要一个类似于谷歌表的结果。

注意：我想只保留两个滚动条，一个位于页面底部，另一个位于页面右侧。

注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;
}

更新小提琴： https://jsfiddle.net/valentincreative/09xnc82h/11/

Answer 2

最后，我修好了。

Abhay Naik对CSS的回应以及对原始JS的一点调整。

我改变了：

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

到：

header.style.transform  = 'translateY(' + container.scrollTop + 'px)';
sidebar.style.transform = 'translateX(' + container.scrollLeft + 'px)';

最终工作JSFiddle：https://jsfiddle.net/09xnc82h/16/

滚动为电子表格

2 个答案: