使用正值转换转换会生成滚动条

Question

我尝试制作移动菜单：http://animesector.budi.upperyard.de/

您可以在顶部标题栏2菜单按钮中看到。 正确的一个给出了内容区域变换（translateX（-200px））; 左边的一个给出了内容区域变换：translateX（200px）;

否定（ - ）值不会创建滚动条水平滚动条... 但积极的确如此。有没有人解决这个问题？

我试图给出一个溢出的div：隐藏;但这对我不起作用。

Answer 1

您可以使用overflow-x: hidden元素中的body阻止水平滚动条。使用开发工具在浏览器中尝试并完美地工作。

Answer 2

我有完全相同的问题。最后，我使用translateX避免了菜单从屏幕滚动 - 我使用了scale转换。

您的网站不再可见，但这可能是您通过转换显示菜单所做的：

translateX(-200px) - ＆gt; translateX(0)

我使用比例来实现有些类似的转换：

scale(0,1) - ＆gt; scale(1,1)

.menu { 
    transition: transform 150ms ease-in-out;
    transform-origin: top right;
    transform: scale(0,1);
}

.menu.open { 
    transform: scale(1,1);
}

是的，动画中存在差异，但如果发生得太快，大多数用户甚至可能无法识别它。

不需要进行溢出操作。