Menu
I want to make a very simple Monaco Editor: JSBin:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.me {
height: 100vh;
}
</style>
</head>
<body>
<div class="me" id="container"></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 },
scrollBeyondLastLine: false
});
});
</script>
</body>
</html>
When I see it in Chrome and scroll up and down, there is a scroller for the whole window. It seems that it is because the height of the editor is larger than the height of the window. I just don't want to see any scrollers. Does anyone know how to achieve this?
Edit 1: a screenshot in Safari 10.1.2 with height: calc(100% - 24px)
Solution:
With the help of the answers, here is the solution working for me:
1) we need to test this in an independent html file rather than in a JSBin
2) the key is to use overflow: hidden
3) as a result, the following code does not create any scroll bar while scrolling up and down, there are no lines hidden in the bottom when the code is long:
<html>
<style>
body {
overflow: hidden;
}
.myME {
height: 100%
}
</style>
<body>
<div class="myME" id="container"></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>
368
I believe it works just by setting body's margin and padding to 0, and the .me's overflow to hidden.
.me {
height: 100vh;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
This won't cause your lines in the bottom invisible, since monaco will handle the scrolling for you.
In fact you are getting the native scrollbar just because that has something to do with how monaco get the scrolling stuffs implemented. Setting the editor container's overflow to hidden will just work fine.
P.S Keep in mind that the editor's size won't change when you resize the window, so you have to detect the resizing and call editor.layout() manually.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
