how to avoid horizontal scroll caused by absolute positioned div

Question

I am using animate.css to add some animations to a wesite.

Some animations like "fadeInLeft/Right" or "bounceInLeft/Right" make the horizonatl scroll to appear. This has easy fix, adding overflow-x:hidden to the parents.

But now I have an absolute positioned button, placed to be in the middle of two parents divs. THe parent div has overflow-x:hidden but it doesn't seems to affect the button because the position:absolute.

How can I avoid the horizontal bar to appear when the button is animated?

This is the website http://themescreators.com/demos/cuora/ the buttons are the circular white floating buttons below the intro slider and above the footer.

Answer 1

Try Overflow to hidden :

body {
      overflow-x: hidden;
    }
    .hidden-thing {
      position: absolute;
      left: 100%;
      width: 50px;
      height: 50px;
      opacity: 0;
    }

Check this resource : https://css-tricks.com/findingfixing-unintended-body-overflow/