Question posted in 
I made some kind of a slideshow in HTML and CSS, with a tiny bit of JavaScript. The slideshow is to run in a single viewport and is controllable using the keyboard’s arrow keys. This all works quite well and I have included a snippet that shows how it works. It is a bit detailed, but I think most of the things in there are relevant to my problem.
In short, there is a navigation top element. Below is a main element that takes up the rest of the viewport’s height. In this main element, there are two sections that represent a slide. These sections are positioned horizontally next to each other using a flexbox. The sliding aspect comes from a tiny piece of JavaScript that sets, for example, a transform: translateX(-100vw) on the main element to show the 2nd slide. This all works well.
Now the content of the slides is vertically larger than the viewport’s height. So I want to make the left and right content separately scrollable. This works when I set overflow: hidden on the main element, however than the transform stops working and no slides are shown on an arrow press.
In the included snippet, I have commented the overflow: hidden, so that at least the sliding part works. Once you uncomment that line, the sliding stops working but the vertical scrollbars of the slide’s content correctly appear.
Now my question is, why does the transform: translateX(...) stop working when the overflow of the main element is set? And how can I go about this, to get both the sliding and the scrollbars for the slide’s content to work?
const main = document.querySelector('main');
function openSlide(slide) {
main.style.transform = `translateX(-${slide * 100}vw)`;
}
window.addEventListener('keydown', function(event) {
if (['ArrowLeft', 'ArrowRight'].includes(event.key)) {
event.key === 'ArrowLeft' ? openSlide(0) : openSlide(1);
event.preventDefault();
}
});
openSlide(0);*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
font-family: sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
width: 100%;
height: 100vh;
font-size: 7vh;
display: flex;
flex-direction: column;
}
nav {
padding: 2vh;
}
main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
transition: transform 0.6s ease-in-out;
/* Uncommenting the statement below, will correctly set the height of the "main" section (i.e. scrollbars appear for both ".left" & ".right"), but the "transform: translateX(...)" doesn't work anymore. */
/* overflow: hidden; */
}
section.slide {
padding: 2vh;
min-width: 100vw;
max-width: 100vw;
display: flex;
flex-flow: row nowrap;
}
section.slide .left {
width: 55vw;
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
}
section.slide .left > div {
background-color: yellow;
margin-bottom: 5vh;
}
section.slide .right {
width: 45vw;
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
}
section.slide .right > div {
background-color: red;
margin-bottom: 5vh;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav>
Navigation - press left or right arrow
</nav>
<main>
<section class="slide" data-slide="0">
<div class="left">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.</div>
</div>
<div class="right">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.</div>
</div>
</section>
<section class="slide" data-slide="1">
<div class="left">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.</div>
</div>
<div class="right">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis lorem, ullamcorper sed porttitor non, hendrerit aliquet nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum varius leo non maximus. Morbi quis dui tellus. Praesent at quam et metus fringilla volutpat ut eu justo. Phasellus at odio non ante consectetur aliquam. Fusce congue ultrices ante, eu sollicitudin lectus tristique sed. Sed neque velit, cursus non consequat ut, aliquet auctor ante.</div>
</div>
</section>
</main>
</body>
</html>
2
Answers
In the end, I managed to fix it by creating a
divelement betweenmainand thesections.maincan now haveoverflow: hiddenresulting in scrollbars in the slide's content. Andmain's sole child element (i.e. thediv) has all slider related styling like thetransform: translateX(...).This works perfectly fine:
You can set
heightor better-yetmax-heightto the container, which will make the scroll-y meaningful.