javascript - 什么是溢出:overlay css property in mozilla and internet explorer browsers的替代品

Question

overflow:overlay 在 chrome 和 safari 中运行良好。此属性在 IE 和 Mozilla 浏览器中不可用。我需要滚动条 Pane 始终可见。

Answer 1

如上面的评论和文档中所述:https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

This deprecated API should no longer be used, but will probably still work.

但是，既然你提到了:

I need the scroll bar pane to be visible always.

您可以使用值 overflow: scroll，无论内容是否实际被剪切，您都将始终拥有滚动条，这将防止内容移动和更改您的布局，例如:

div {
  border: 1px solid black;
  float: left;
  height: 100px;
  margin: 10px;
  overflow: scroll;
  width: 200px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum ligula vel dolor eleifend, vel interdum risus tristique. Nullam laoreet sed metus at aliquam. Aliquam ornare sagittis nibh in volutpat. Sed dolor orci, viverra ut lectus ac, commodo faucibus nisl. Proin molestie felis ligula, ullamcorper sollicitudin lacus commodo eu. Curabitur sit amet cursus ante. Aliquam vel leo et justo luctus semper eget sit amet turpis. Aenean ac rhoncus dolor. Etiam ut euismod arcu, vehicula suscipit ex.   Donec nec posuere sapien. Phasellus accumsan sem nec nibh congue, ut porttitor diam convallis. Nulla ac tempus arcu. Suspendisse at lorem est. Nullam sit amet commodo felis. Quisque ac mollis metus. Duis varius eleifend sem, eget venenatis ante mattis
  at.
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum ligula vel dolor eleifend, vel interdum risus tristique. 
</div>