Css”;右“;负值而不扩展滚动区域

Css "right" minus value without extending scroll area?

本文关键字：扩展 滚动 区域 Css      更新时间：2023-09-26

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

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

请参阅：http://jsfiddle.net/oz62o2yd/2/<-这是刚好的负值，来到屏幕区域。

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

我不想只是"隐藏"滚动条，但也禁用它们。

如果我需要使用javascript，我也可以。

由于基于流的布局的性质，浏览器的文档大小总是会根据需要向右和向下增长。因此，呈现"超出右边界"的内容确实会导致滚动条向右移动。

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

body {
    overflow-x:hidden;
}

这实际上会修复你的小提琴。对于更复杂的情况，这可能是不够的。然后，您可以选择将有问题的元素包装在一个绝对定位的父元素中，该父元素保持在现有边界内，并且本身具有有限的overflow设置。

我使用修复了它

window.onscroll = function () { window.scrollTo(0, 0); };

问题是，我使用的是webgl/three.js和three.js，在某些（大多数）分辨率下，全屏在屏幕底部有一个非常小的边框。为了修复这个边界，你必须显示：块，当你有显示：块和其他元素和大量的绝对位置时，宽度：100%意味着画布将进入"第二页"

body标记和/或容器上的"overflow：hidden"在IE11上有效，但在chrome/canary/nighty和熟悉的浏览器上无效，因为结构复杂（非常复杂，顺便说一句），而且因为同一页面有jQuery UI，这也意味着如果我想在页面启动时显示对话框，"容器"将不会包含所有元素，因为jQuery UI在body标记中创建了元素，所以这也意味着我必须编辑jQuery（这是可以的）

上面的js标签在所有现代浏览器中都能完美地工作，但在我不瞄准的旧浏览器中却很快。

相关文章：