javascript - 添加数据时如何向下滚动到页面底部？

Question

我已经在我的 Ionic 应用程序中进行了聊天，但是当用户收到一条新消息并正在聊天时， View 不会向下滚动以使消息出现，用户必须手动向下滚动才能看到它.

如何在出现新消息时自动滚动到页面底部？

这是我的代码的 HTML:

<ion-view  view-title="Chat Detail">


    <ion-content class="padding" start-y="430">
        <!-- *messages / content messages -->
        <ol  class="messages">

            <!-- *self / container self messages -->
            <li ng-repeat="message in messages" ng-class="{self: message.userId === myId, other: message.userId !== myId}">
                <!-- *avatar / avatar image -->
                <div class="avatar">
                    <img ng-src="{{ message.profilePic }}">
                </div>
                <!-- *msg / messages -->
                <div id="data" class="msg">
                    <p>{{ message.text }}</p>
                    <time>
                        <i class="icon ion-ios-clock-outline"></i>
                        {{message.time}}
                    </time>
                </div>
            </li>
        </ol>
    </ion-content>
    <!-- *bar-detail / color bar and input -->
    <ion-footer-bar keyboard-attach class="item-input-inset bar-detail">
        <label class="item-input-wrapper">
        <input onblur="this.focus()" autofocus type="text" placeholder="Type your message" on-return="sendMessage(); closeKeyboard()" ng-model="data.message" on-focus="inputUp()" on-blur="inputDown()" />
        </label>
        <a class="button button-icon icon ion-arrow-return-left" ng-click="sendMessage()" ></a>
    </ion-footer-bar>
</ion-view>

编辑:添加 Controller :

  //Recieve messages
        $timeout(function(){
        var ref = firebase.database().ref('/messages/' + $scope.currentDiscussion);
        ref.orderByChild("timestamp").on("value", function(snapshot1) {

          $timeout(function(){
          $scope.messages = snapshot1.val();

            })
          })

        })
        window.scrollTo(0,document.body.scrollHeight);

        $scope.sendMessage = function() {

          if ($scope.blocked === 1){

            // An alert dialog

     var alertPopup = $ionicPopup.alert({
       title: 'BLOCKED',
       template: 'This discussion is blocked.'
     });

     alertPopup.then(function(res) {

     });
   } else {

          var d = new Date();
          var g = new Date();
          d = d.toLocaleTimeString().replace(/:\d+ /, ' ');
          g = g.toLocaleTimeString().replace(/:\d+ /, ' ') + new Date();



          $scope.sendMessages = firebase.database().ref('/messages/' + $scope.currentDiscussion).push({
            userId: myId,
            text: $scope.data.message,
            time: d,
            timestamp: g,
            profilePic: $scope.displayProfilePic,

          });

          firebase.database().ref('/accounts/' + myId + "/discussions/" + $scope.currentDiscussion).update({
            lastMessage: $scope.data.message,
            time: d,
            blocked: 0,
            blockedOther: 0,
            });

            if ($scope.newMessages === ""){
            firebase.database().ref('/accounts/' + $scope.savedUid + "/discussions/" + $scope.currentDiscussion).update({
              lastMessage: $scope.data.message,
              name: $scope.displayName,
              profilePic: $scope.displayProfilePic,
              time: d,
              discussionId: $scope.currentDiscussion,
              blocked: 0,
              newMessages: 1,
              userId: myId,
              });
            } else {
              firebase.database().ref('/accounts/' + $scope.savedUid + "/discussions/" + $scope.currentDiscussion).update({
                lastMessage: $scope.data.message,
                name: $scope.displayName,
                profilePic: $scope.displayProfilePic,
                time: d,
                discussionId: $scope.currentDiscussion,
                blocked: 0,
                newMessages: $scope.newMessages + 1,
                userId: myId,
                });
            }

              firebase.database().ref('/accounts/' + $scope.savedUid ).update({

                messagesTotal: $scope.messagesTotal + 1,
                });


          delete $scope.data.message;
          $ionicScrollDelegate.scrollBottom(true);
        }

        };

        $scope.inputUp = function() {
          if (isIOS) $scope.data.keyboardHeight = 216;
          $timeout(function() {
            $ionicScrollDelegate.scrollBottom(true);
          }, 300);

        };

        $scope.inputDown = function() {
          if (isIOS) $scope.data.keyboardHeight = 0;
          $ionicScrollDelegate.resize();
        };

        $scope.closeKeyboard = function() {
          // cordova.plugins.Keyboard.close();
        };

      })
      $scope.leaveChat = function() {
           var userId = firebase.auth().currentUser.uid;
           firebase.database().ref('accounts/' + userId).update({
             currentDiscussion: "",
             })



         };


      $scope.data = {};
      $scope.myId = myId;

      $scope.messages = [];

Answer 1

您可以在此处查看$ionicScrollDelegate 服务:http://ionicframework.com/docs/api/service/ $ionicScrollDelegate/

使用方法

$ionicScrollDelegate.scrollBottom([shouldAnimate])

shouldAnimate 是一个 bool 类型，用于指定您是否想要动画滚动。