Dat werkt, maar het is nog niet gelukt om de schermen die links van het scherm afschuiven te laten staan, waarbij de overige schermen er als het ware bovenop schuiven, als een stapel. Ik geloof dat je daarvoor display: sticky; moet gebruiken en dat het alleen werkt als je met absolute groottes werkt in plaats van relatieve.
Iemand een idee hoe je dat zou kunnen doen?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
html { scroll-behaviour: smooth; }
html,
body {
display: block;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.wrapper {
width: 100vh;
height: 100vw;
margin-top: 100vh;
transform: rotate(-90deg);
transform-origin: top left;
overflow: auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.schermen {
display: flex;
height: 100vh;
min-width: 100vw;
margin-left: 100vh;
transform: rotate(90deg);
transform-origin: top left;
}
.scherm {
flex: 1 0 50vw;
scroll-snap-align: start;
overflow-x: none;
overflow-y: auto;
}
.s1 { background: gainsboro; }
.s2 { background: grey; font-size: 24px; }
.s3 { background: lightblue; }
.s4 { background: slategrey; }
.s5 { background: lightgreen; }
</style>
</head>
<body>
<div class="wrapper">
<div class="schermen">
<div class="scherm s1">Eerste scherm
<button onclick="document.getElementById('einde').scrollIntoView({
behavior: 'smooth'
});">OK</button>
</div>
<div class="scherm s2"><h3>Tweede scherm</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed faucibus turpis in eu. Lacus luctus accumsan tortor posuere. Facilisis gravida neque convallis a cras semper. Donec et odio pellentesque diam volutpat commodo sed. Dapibus ultrices in iaculis nunc sed. Ac ut consequat semper viverra nam libero justo laoreet. Metus dictum at tempor commodo ullamcorper. Consectetur lorem donec massa sapien faucibus et molestie. Enim facilisis gravida neque convallis a.
Mattis vulputate enim nulla aliquet porttitor lacus. Risus nec feugiat in fermentum posuere. Laoreet sit amet cursus sit amet dictum sit. Nisl vel pretium lectus quam id leo in. Eget gravida cum sociis natoque penatibus et. Elit at imperdiet dui accumsan sit amet nulla facilisi. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Non nisi est sit amet facilisis magna etiam tempor orci. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Purus non enim praesent elementum. Pulvinar neque laoreet suspendisse interdum consectetur libero. Praesent semper feugiat nibh sed. Vulputate dignissim suspendisse in est ante. Donec et odio pellentesque diam. Pellentesque eu tincidunt tortor aliquam nulla. Ornare suspendisse sed nisi lacus sed viverra.</div>
<div class="scherm s3">Derde scherm</div>
<div class="scherm s4">Vierde scherm</div>
<div id="einde" class="scherm s5">Vijfde scherm</div>
</div>
</div>
</body>
</html>
