onscroll-onpreviewscroll.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Onscroll / Onpreviewscroll - Editor.md examples</title>
  6. <link rel="stylesheet" href="css/style.css" />
  7. <link rel="stylesheet" href="../css/editormd.css" />
  8. <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
  9. </head>
  10. <body>
  11. <div id="layout">
  12. <header>
  13. <h1>Onscroll / Onpreviewscroll event handle</h1>
  14. <p>Plaese press F12, open the develop tools.</p>
  15. </header>
  16. <div id="test-editormd">
  17. <textarea style="display:none;">#### Settings
  18. ```javascript
  19. {
  20. onscroll : function(event) {
  21. // console.clear();
  22. // console.log("onscroll =>", this, this.id, this.settings, event);
  23. // ...
  24. },
  25. onpreviewscroll : function(event) {
  26. // console.clear();
  27. // console.log("onpreviewscroll =>", this, this.id, this.settings, event);
  28. // ...
  29. }
  30. }
  31. ```
  32. </textarea>
  33. </div>
  34. </div>
  35. <script src="js/jquery.min.js"></script>
  36. <script src="../editormd.js"></script>
  37. <script type="text/javascript">
  38. var testEditor;
  39. $(function() {
  40. $.get("./test.md", function(md){
  41. testEditor = editormd("test-editormd", {
  42. width : "90%",
  43. height : 720,
  44. appendMarkdown : md,
  45. path : '../lib/',
  46. onscroll : function(event) {
  47. console.clear();
  48. console.log("onscroll =>", this, this.id, this.settings, event);
  49. },
  50. onpreviewscroll : function(event) {
  51. console.clear();
  52. console.log("onpreviewscroll =>", this, this.id, this.settings, event);
  53. }
  54. });
  55. });
  56. });
  57. </script>
  58. </body>
  59. </html>