Question

我有一个脚本，通过使用ajax附加文本来更新div（chat-area）。然后它会在更新后滚动到div的底部。我可以让div滚动到底部（并保持在底部）的唯一方法是使用＆＃34; setTimeout＆＃34;。然而，这会产生可怕的影响。

我想要的：任何更改后，div chat-area应保持滚动到底部。（没有任何延迟）

我怎么能做到这一点？

 <script>
        $(document).ready(function(){
            <!-- RUN WHEN USER CLICKS CHAT -->
                $('#chatform').submit(function(e){
                        e.preventDefault();
                    <!-- Updates Window -->
                    var f = document.forms.e_form;
                    var userinput = f.e_input.value;
                        $.ajax({ url: 'path/file.php',
                         data: {action: 'test', theinput: userinput},
                         type: 'post',
                         success: function(output) {
                                    $("#chat-area").append(output);
                                }
                    });
                <!--  Resets and scrolls form -->
                            $('#chattextbox').val("");
                            $("#chattextbox").focus();
                             setTimeout(function(){
    document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
    }, 200);

                }); 
        });
    </script>

Answer 1

将您的清理代码放在complete回调中。请参阅the documentation。

$(document).ready(function(){
  var scrollDown = (function(){
    document.getElementById('chat-area').scrollTop = 
      document.getElementById('chat-area').scrollHeight;
  });
  /* RUN WHEN USER CLICKS CHAT */
  $('#chatform').submit(function(e){
    e.preventDefault();
    /* Updates Window */
    var f = document.forms.e_form;
    var userinput = f.e_input.value;
    $.ajax({
      url: 'path/file.php',
      data: {action: 'test', theinput: userinput},
      type: 'post',
      success: function(output) {
        $("#chat-area").append(output);
      },
      complete: function() {
        /* Resets and scrolls form */
        $('#chattextbox').val("");
        $("#chattextbox").focus();
        scrollDown();
      }
    });
  }); 
});

Answer 2

在ajax成功更新聊天区内容后，您应滚动页面。

success: function(output) {
 $("#chat-area").append(output);
 document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;
}

无需使用setTimeout。

Answer 3

将滚动代码放入函数中，并在添加通过ajax收到的文本后调用此函数。我没有尝试过，但类似的东西应该有用：

    // Methode for reseting and refocus Input-Field
function resetAndFocusInput($target){
  $target.val("");
  $target.focus();
}
// Methode for scrolling to top of chat area
function scrollTo($target){
  $target.scrollTop($target.scrollHeight())
}
$( document ).read(function(){
  var $chatform = $( '#chatform' ),
  $userInput = $( '#chattextbox' ),
  $chatArea = $( "#chat-area" );
  // Bind to submit-event of chat-form
  $chatform.on( 'submit', function( event ){
    event.preventDefault();
    // Receive chat-data via ajax and update chat-area on success
      $.ajax({ url: 'path/file.php',
        data: {action: 'test', theinput: $userInput.val() },
        type: 'post',
        success: function( data ) {
              $chatArea.append( data );
              scrollTo( $chatArea );
        },
        complete: function(){
            resetAndFocusInput( $userInput );
        }
    });
  });
});

JS滚动在页面准备好之前发生

3 个答案: