It turns out that the right side containing the hidden unit in the mobile version has scrolled. Is there any way to fix it?

enter image description here

enter image description here

    1 answer 1

    Well, the point is that the container gives overflow: hidden;

    document.querySelector('.block_hidden').addEventListener('click', function(){ this.classList.toggle('open'); }) 
     body { padding: 0; margin: 0; } .wrapper { width: 100%; height: 400px; background-color: orange; position: relative; overflow: hidden; } .block_hidden { height: 250px; width: 400px; background-color: green; position: absolute; top: 10px; right: 0; transition: all .5s; transform: translateX(50%); } .block_hidden.open { transform: translateX(0); } 
     <div class="wrapper"> <div class="block_hidden"></div> </div>

    • That is, a negative value can not take the picture from the eyes?) - Vladimir Kravchenko
    • What does a negative value mean? why not transform like? it takes percentages of its width. then you don't care how wide the block is. Well, if you want, you can remove the transform, and set right: -200px (if the width is known is 400px), and when open, give right: 0 - Yuri Kopot
    • Or what you mean. specify - Yuri Kopot
    • I try to set overflow: hidden for the block in which the image is located - does not come out - the mobile does not move to the left. - Vladimir Kravchenko
    • oliver.sliding.com.ua - Vladimir Kravchenko