javascript - 模态固定位置内容移位

Question

经过大量研究，我是unable to find a proper solution当模式窗口打开时，向固定定位元素的右侧移动、封面图像和标准内容。

注意:我正在寻找一个通用的、干净的解决方案，而不是只适用于特定布局的硬编码修复。

有人知道如何解决这个问题吗？请引用这个例子:http://codepen.io/microcipcip/pen/kXdRWK

body {
  height: 2500px;
  &.-modal-open {
      overflow: hidden;
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background: #FF0000;
}
.modal {
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity .2s ease-in-out;
    body.-modal-open & {
        opacity: 1;
    }
}

Answer 1

解决方案非常简单，纯 css 修复:

.-modal-open .fixed,
.-modal-open .content {
  overflow-y:scroll;
}

..然而，这要求您的内容具有不同的样式。您永远不应该为您的内容使用边距，而是将其包装在容器中并使用填充代替。

滚动条的宽度并不总是 17px...17px 用于 Firefox，但 15px 用于 chrome，有时 IE 甚至没有滚动条宽度，具体取决于代码。

这是更新的笔: http://codepen.io/scooterlord/pen/KgKLwB

编辑:忘了说，这是一个跨浏览器的解决方案，在我测试过的所有地方都能完美运行。如果浏览器是移动的，那么添加/删除额外滚动条不会改变宽度，并且根据浏览器，新创建的内容/固定元素滚动条始终与初始主体滚动条相同。