Question

我遇到了一个我不知道如何解决的问题，希望这里有人能够解决这个问题。

我有一个非常简单的布局（JSBin），带有一个水平居中的标题，一些内容可以体验垂直滚动，一个sticky footer和一个离开画布的导航菜单。我想阻止用户在侧边栏打开时滚动页面，我是通过在<html>标签上切换一个类来实现的：

$('button').click(function () {
    $('html').toggleClass('sidebar');
});

.sidebar类会将侧边栏转换为视图并禁用内容滚动：

html {
  overflow-y: scroll; /* default state, always shows scrollbar */
}

html.sidebar {
  overflow-y: hidden; /* hides scrollbar when .sidebar is on canvas */
}

html.sidebar aside {
  -webkit-transform: translate3d(-100%, 0, 0); /* places .sidebar on canvas */
}

问题是，它取代了页面中的每个元素，无论<html>滚动条的宽度是什么。

有没有办法阻止这种位置的转变（最好不要诉诸Javascript）？

如果你需要查看代码，这里是JSBin editor。

更新：似乎Javascript不是一个选项，滚动宽度计算根本不可靠。

Answer 1

您可以切换margin-right的{{1}}以补偿宽度的变化

.container

Demo

从this answer

获取的滚动条宽度计算

Answer 2

我找不到可靠的CSS解决方案。但是，我使用以下Javascript取得了成功：

activeItem

我还没有分析每次有人点击我的网站时运行此代码会产生什么样的处理影响（这可能很难看），但它确实有效。

切换多个溢出元素时的位移

2 个答案: