scroll test.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Editor</title>
  7. <style type="text/css" media="screen">
  8. .ace_editor, #native {
  9. border: 1px solid lightgray;
  10. margin: auto;
  11. height: 200px;
  12. width: 80%;
  13. }
  14. .scrollmargin {
  15. height: 80px;
  16. text-align: center;
  17. }
  18. #native, #editor2 {
  19. overflow: auto;
  20. height: 20em;
  21. width: 30em;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="scrollmargin"></div>
  27. <div class="scrollmargin"></div>
  28. <div class="scrollmargin"></div>
  29. <div class="scrollmargin"></div>
  30. <pre id="editor1">autoresizing editor</pre>
  31. <div class="scrollmargin"></div>
  32. <pre id="native">
  33. native scrollable area
  34. some text
  35. 1 1 1 1 1 1
  36. 2 2 2 2 2 2
  37. 3 3 3 3 3 3
  38. 4 4 4 4 4 4
  39. 5 5 5 5 5 5
  40. 6 6 6 6 6 6
  41. 7 7 7 7 7 7
  42. 8 8 8 8 8 8
  43. 9 9 9 9 9 9
  44. 10 10 10 10 10 10
  45. 11 11 11 11 11 11
  46. 12 12 12 12 12 12
  47. 13 13 13 13 13 13
  48. 14 14 14 14 14 14
  49. 15 15 15 15 15 15
  50. 16 16 16 16 16 16
  51. 17 17 17 17 17 17
  52. 18 18 18 18 18 18
  53. 19 19 19 19 19 19
  54. looooooooooooooong line looooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong line
  55. native scrollable area
  56. some text
  57. 1 1 1 1 1 1
  58. 2 2 2 2 2 2
  59. 3 3 3 3 3 3
  60. 4 4 4 4 4 4
  61. 5 5 5 5 5 5
  62. 6 6 6 6 6 6
  63. 7 7 7 7 7 7
  64. 8 8 8 8 8 8
  65. 9 9 9 9 9 9
  66. 10 10 10 10 10 10
  67. 11 11 11 11 11 11
  68. 12 12 12 12 12 12
  69. 13 13 13 13 13 13
  70. 14 14 14 14 14 14
  71. 15 15 15 15 15 15
  72. 16 16 16 16 16 16
  73. 17 17 17 17 17 17
  74. 18 18 18 18 18 18
  75. 19 19 19 19 19 19
  76. looooooooooooooong line looooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong linelooooooooooooooong line
  77. </pre>
  78. <div class="scrollmargin"></div>
  79. <pre id="editor2">minHeight = 2 lines</pre>
  80. <div class="scrollmargin"></div>
  81. <pre id="editor3" style="width: 40%;"></pre>
  82. <div class="scrollmargin"></div>
  83. <pre id="editor"></pre>
  84. <div class="scrollmargin"></div>
  85. <div class="scrollmargin"></div>
  86. <div class="scrollmargin"></div>
  87. <div class="scrollmargin"></div>
  88. <div class="scrollmargin"></div>
  89. <!-- load ace -->
  90. <script src="../src/ace.js"></script>
  91. <script>
  92. var editor1 = ace.edit("editor1", {
  93. value: ("editor1 ".repeat(20) + "\n").repeat(3),
  94. mode: "ace/mode/html",
  95. maxLines: 30,
  96. autoScrollEditorIntoView: true
  97. });
  98. var editor2 = ace.edit("editor2", {
  99. value: document.getElementById("native").textContent.slice(6),
  100. // theme: "ace/theme/tomorrow_night_blue",
  101. mode: "ace/mode/html",
  102. autoScrollEditorIntoView: true,
  103. });
  104. var editor = ace.edit("editor3");
  105. editor.setOptions({
  106. autoScrollEditorIntoView: true,
  107. maxLines: 8
  108. });
  109. editor.renderer.setScrollMargin(10, 10, 10, 10);
  110. var editor = ace.edit("editor");
  111. editor.setTheme("ace/theme/tomorrow");
  112. editor.session.setMode("ace/mode/html");
  113. editor.setAutoScrollEditorIntoView(true);
  114. editor.setOption("maxLines", 20);
  115. </script>
  116. <script src="./show_own_source.js"></script>
  117. </body>
  118. </html>