Adding visibility: hidden to hidden elems solve unwanted scrolling and slide effect remains.

.step-1 .mail, .step-1 .add-message, .step-1 .progress, .step-1 .complete {
    left: 600px;
    visibility: hidden;
}

Here is a step by step form working as a slider.

Parent div has styling

#formContainer {
position: absolute;
top: calc((100% - 400px) / 2);
overflow: hidden;
}

and children has

.step {
    position: absolute;
    top: 0;
    width: 100%;
}

active child has

.step-1 .select {
    left: 0;
}

passive childs has

.step-1 .mail, .step-1 .add-message, .step-1 .progress, .step-1 .complete {
    left: 600px;
}

When first step is active and pressing TAB key, it looks like:

Somehow, even though hidden steps left is set to 600px, positioning conflicts and other steps elems comes into screen.