Прокрутить как таблица

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.

Примечание: я хочу сохранить только две полосы прокрутки, одну снизу и одну справа на странице.

Примечание 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/