如何避免带有过渡元素的水平滚动条

Question

I have multiple elements in which I am using transform:translate to add a slide in transition effect. This is working great. The issue I am having is since the elements are off the screen initially, scroll bars are appearing until the element transforms and slides over.

I am using waypoints for the scroll point and I have seen other scenarios (slidein from off the page) that the scroll bar does not appear.

How can I ensure the scroll bar does not appear with these transitioned elements on my page?

The active class is added to phone-slide when the waypoint is reached.

#phone-slide {
    width: 65%;
    display: block;
    height: auto;
    position: absolute;
    right: -50%;
    margin: 10px 0;
    opacity: 0;
    transition: 1s;-webkit-transition: 1s;
}
#phone-slide.active {
    opacity: 1;
    transform: translateX(-50%);-webkit-transform: translateX(-50%);
    transition: 1s;-webkit-transition: 1s;
}

Answer 1

The best way would be to position phone-slide inside an absolute positioned div with hidden overflow. This div can have width and height equal to the page dimensions and the content inside it will be truncated if it goes beyond with no scrollbars.

See THIS solution by Jacob Ewing

Another accepted answer