Browse Source

auto scroll to bottom

wangweimin 5 years ago
parent
commit
8db069ff36
2 changed files with 11 additions and 4 deletions
  1. 8 2
      pywebio/html/index.html
  2. 3 2
      pywebio/html/js/form.js

+ 8 - 2
pywebio/html/index.html

@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="css/app.css">
 </head>
 <body>
-<div class="container">
+<div class="container no-fix-height">
     <div tabindex="1" class="mditor preview">
         <div class="head">
             <ul class="toolbar">
@@ -83,11 +83,17 @@
         // ws.send("Hello, world");
     };
     var viewer = $('.viewer');
+    var body = $('body');
     ws.onmessage = function (evt) {
         var msg = JSON.parse(evt.data);
         console.log('>>>', msg);
         ctrl.handle_message(msg);
-        viewer.scrollTop(md_body[0].scrollHeight);  // 自动滚动
+        // viewer.scrollTop(md_body[0].scrollHeight);  // 输出区自动滚动
+        viewer.stop().animate({scrollTop:viewer[0].scrollHeight}, 700);
+        setTimeout(function () {
+            // body.scrollTop(body[0].scrollHeight);  // 整个页面自动滚动
+            body.stop().animate({scrollTop:body[0].scrollHeight}, 700);
+        }, WebIO.FormShowDuration+10);
     };
     ws.onclose = function () {
         document.title = 'Closed';

+ 3 - 2
pywebio/html/js/form.js

@@ -169,7 +169,7 @@
         }));
     }
 
-    const ShowDuration = 200; // ms
+    const ShowDuration = 200; // ms, 显示表单的过渡动画时长
 
     FormsController.prototype.accept_command = ['input', 'input_group', 'update_input', 'destroy_form'];
 
@@ -776,7 +776,8 @@
 
     return {
         'WebIOController': WebIOController,
-        'DisplayAreaButtonOnClick': DisplayAreaButtonOnClick
+        'DisplayAreaButtonOnClick': DisplayAreaButtonOnClick,
+        'FormShowDuration': ShowDuration
     }
 
 })));