javascript - 多个 ui-ace 代码编辑器的滚动问题

Question

使用 ui-ace http://angular-ui.github.io/ui-ace/并尝试在单个网页中使用多个代码编辑器。 plunker 示例在这里 https://plnkr.co/GPictv3HdtGWW76fHw2l

您应该能够按照以下步骤重现滚动问题:

1. 向下滚动到代码编辑器 4 并在编辑器 4 中选择一些文本
2. 向上滚动到代码编辑器 1 并选择编辑器 1 中的一些文本
3. 滚动回代码编辑器 4，当您在代码编辑器 4 中单击以选择或编辑文本时，窗口会自动向上滚动以显示代码编辑器 1

显示编辑器 1 - 4 的主要代码在这里。如何防止自动滚动行为？如果用户单击其中一个代码编辑器来编辑或选择文本，则窗口不应滚动到其他代码编辑器。如果我将 style.css 中的高度更改为 70px 而不是 500px，则所有代码编辑器在最大化时都会适合浏览器窗口，并且在不同的窗口中选择或编辑代码时不会出现自动滚动问题。代码编辑器。如果您缩小浏览器窗口高度，使代码编辑器不适合窗口，那么当您尝试在不同的代码编辑器中选择或编辑代码时，滚动问题将再次出现。

<section>
<label>Editor1:</label>
<div ui-ace="{
  useWrapMode : false,
  showGutter: false,
  theme:'monokai',
  mode: 'javascript'
}" ng-model="editor1">Ace 1 here</div>
<br>
<label>Editor2:</label>
<div ui-ace="{
  useWrapMode : false,
  showGutter: false,
  theme:'monokai',
  mode: 'javascript'
}" ng-model="editor2">Ace 2 here</div>
<br>
<label>Editor3:</label>
<div ui-ace="{
  useWrapMode : false,
  showGutter: false,
  theme:'monokai',
  mode: 'javascript'
}" ng-model="editor3">Ace 3 here</div>
<br>
<label>Editor4:</label>
<div ui-ace="{
  useWrapMode : false,
  showGutter: false,
  theme:'monokai',
  mode: 'javascript'
}" ng-model="editor4">Ace 4 here</div>
</section>

Answer 1

经过进一步研究，发现 ui-ace plunker 演示使用的是 ace.js 版本，当使用多个代码编辑器时，该版本会导致这种奇怪的滚动行为。而不是使用 <script src="https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js"></script>在您的演示中，您可以使用此处的 ace.js 版本 https://angular-ui.github.io/ui-ace/vendor/ace.js或者更好的是你可以使用 <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src-min/ace.js"></script>

如果查看页面源http://angular-ui.github.io/ui-ace/然后点击vendor/ace.js您可以确认他们正在使用 http://angular-ui.github.io/ui-ace/vendor/ace.js而他们的 plunker 演示使用 https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js

<!-- Le javascript
================================================== -->
<script src="assets/vendor/prettify.js"></script>
<script src="assets/vendor/angular.min.js"></script>
<script src="assets/vendor/ui-bootstrap-tpls.min.js"></script>
<script src="core/prettifyDirective.js"></script>
<script src="core/plunker.js"></script>
<script src="vendor/ace.js"></script>
<script src="vendor/theme-twilight.js"></script>
<script src="vendor/mode-markdown.js"></script>
<script src="vendor/mode-scheme.js"></script>
<script src="vendor/worker-javascript.js"></script>
<script src="dist/ui-ace.min.js"></script>

工作笨蛋在这里 https://plnkr.co/E7Dl2btYJFWpms0mdVE0