css 绝对定位隐藏的滚动条......有点扭曲

Question

我正在开发一个将 1024 X 768 作为最低分辨率的网站。所以，我们的宽度约为 970 像素。设计回来了一个有趣的布局，它有一个居中的网站，横幅实际上超过了这个宽度(准确地说是 1288 像素)，对于分辨率更高的用户来说看起来不错，但在 1024 时看起来不错。

因此，为了防止滚动条出现在 1024 处，我绝对定位了横幅并使用了 overflow-x: hidden on the body。这在我们的目标浏览器上工作得很好。

现在，客户回来了，要求在 800 X 600(是的，这不是目标)上为用户显示滚动条，以便他们可以看到关键的登录按钮。

如何在不进行根本性改变的情况下满足这 2% 的用户的需求？我能想到的就是检测它们的屏幕宽度并删除 overflow-x:hidden。

当需求在构建过程的后期发生变化时，您一定会喜欢!

编辑 - 这是我所拥有的，对我来说似乎很简单 - 这里有什么注意事项吗？

if (screen.width < 1024) {
    $("body").css("overflow-x", "visible");
}

Answer 1

如何将横幅分成三部分。

1. 左侧超过 800 像素。
2. 中心 800 像素。
3. 超出 800 像素的右侧。

然后设置 overflow-x: hidden; 仅用于 1 和 3。

那样的话，如果中间的 800 像素被截断，他们就会得到一个滚动条。例如，如果用户可以看到 1100 像素但看不到整个横幅，他们将不会看到滚动条。