Page transition with CSS transform problems

Question

I want to do a simple transition between two pages. The animation should be a movement from right to left to go to the second page, and then, left to right to return to the first page.

I've made this, but the problem is that duplicates the width of the page.

const screen1 = document.getElementsByClassName('screen1')[0];
const screen2 = document.getElementsByClassName('screen2')[0];

document.getElementById('toggle1').addEventListener('click', () => {
  screen1.style.transform = 'translatex(-100%)';
  screen2.style.transform = 'translatex(0)';
});

document.getElementById('toggle2').addEventListener('click', () => {
  screen1.style.transform = 'translatex(0)';
  screen2.style.transform = 'translatex(100%)';
});

body {
  margin: 0;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.screen1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
  transition: transform .5s;
}

.screen2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  transform: translatex(100%);
  transition: transform .5s;
}

<div class="container">
  <div class="screen1">
    <button id="toggle1">Toggle</button>
  </div>
  <div class="screen2">
    <button id="toggle2">Toggle</button>
  </div>
</div>

The problems that I've with this:

• In an element with 100% of width I must to use the viewport units. In other case, the 100% will be two screens.
• An element with fixed position, positioned to the right of the screen, will take the right value of the second screen. So it won't be displayed.
• I can hide the scroll bar with overflow-x: hidden but the user can scroll to the next screen anytime.

There is some way to fix this problems and maintain the "slide" transition?

Answer 1

Just add overflow: hidden to your container.

const screen1 = document.getElementsByClassName('screen1')[0];
const screen2 = document.getElementsByClassName('screen2')[0];

document.getElementById('toggle1').addEventListener('click', () => {
  screen1.style.transform = 'translatex(-100%)';
  screen2.style.transform = 'translatex(0)';
});

document.getElementById('toggle2').addEventListener('click', () => {
  screen1.style.transform = 'translatex(0)';
  screen2.style.transform = 'translatex(100%)';
});

body {
  margin: 0;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.screen1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
  transition: transform .5s;
}

.screen2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  transform: translatex(100%);
  transition: transform .5s;
}

<div class="container">
  <div class="screen1">
    <button id="toggle1">Toggle</button>
  </div>
  <div class="screen2">
    <button id="toggle2">Toggle</button>
  </div>
</div>

Answer 2

Add overflow:hidden property to your .container