javascript - Css "right"减值而不扩展滚动区域？

Question

我想让 2 个侧边栏右对齐，其中一个侧边栏被隐藏。我希望当用户单击右侧边栏中的一个按钮时，侧边栏应该向右消失，并且新的侧边栏应该与 css 动画同时出现。

如果我使用 right:-50px 这会扩展可滚动区域。如果我使用具有宽度的容器，这仍然会扩展可滚动区域。

参见:http://jsfiddle.net/oz62o2yd/2/ <- 这是恰到好处的负值，来到屏幕区域。

和http://jsfiddle.net/oz62o2yd/3 <- 这里我使用了一个容器，但这并没有阻止页面制作滚动条。

我不想只“隐藏”滚动条，还要禁用它们。

如果我需要为此使用 javascript，我也可以接受。

Answer 1

由于基于流的布局的性质，浏览器的文档大小将始终根据需要向右和底部增大。因此，渲染“超出右边界”的内容确实会导致滚动条向右移动。

根据您的具体情况，可能适用多种解决方案。最简单的是简单地禁用水平溢出:

body {
    overflow-x:hidden;
} 

实际上fix your fiddle .对于更复杂的情况，它可能还不够。然后，您可以选择将有问题的元素包装在一个绝对定位的父元素中，该父元素保持在现有边界内并且本身具有有限的 overflow 设置。