Question

我想在一些固定文本下的页面中嵌入摩纳哥编辑器，我希望Monaco编辑器的高度能够完全填充页面的其余部分。人们给了我一个答案（JSBin）：

<html>
    <style>
    body {
        margin: 0;
        height: 100%;
    }

    .rb {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .myME {
        flex:1;
        background: grey;
    }

    #container > * {
        max-height:100%;
        overflow:auto;
    }
    </style>
    <body>
        <div class="rb">
            <div class="top">1<br/>2<br/>3<br/>4<br/></div>
            <div class="myME" id="container"></div>    
        </div>
    <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }})

        require(["vs/editor/editor.main"], function () {
          var editor = monaco.editor.create(document.getElementById('container'), {
            value: 'function x() {\n\tconsole.log("Hello world!");\n}',
            language: 'javascript',
            minimap: { enabled: false },
            automaticLayout: true,
            scrollBeyondLastLine: false
          });
        });
    </script>
    </body>
</html>

适用于Chrome。但是，在Safari中，当快速向下滚动时，我们可以看到闪烁。

有谁知道如何解决这个问题？

Answer 1

删除此规则中的overflow: auto以修复Safari滚动故障：

#container > * {
    max-height: 100%;
    overflow: auto; /* remove this */
}

在Safari中向下滚动时闪烁

1 个答案: