如何固定滚动条始终位于div的底部.....?

时间:2015-09-04 11:03:31

标签: jquery angularjs

加载页面时,滚动条必须位于底部..这是My HtmlFiles

<div ng-controller="ConversationController as value">
        <br>
        <br>
        <br>
            <div class="col-lg-12">
                <div class="main-box clearfix">
                    <header class="main-box-header clearfix">
                        <h2>Conversation...</h2>
                    </header>  
                    <form id="scroll">                      
                    <div class="main-box-body clearfix">
                        <div class="conversation-wrapper"when-scrolled="more()"schroll-bottom="value"id="scrolled">
                            <div class="conversation-content">
                                <span ng-repeat="message in value">
                                    <div class="conversation-item item-left clearfix"
                                        ng-show="{{message.whoSendTheMessage.userId!=loggedUser}}">
                                        <div class="conversation-user">
                                            <img src="lib/app/img/user.jpg" style="width: 50px;" alt="">
                                        </div>
                                        <div class="conversation-body">
                                            <div class="name">{{message.whoSendTheMessage.firstName}}&nbsp;{{message.whoSendTheMessage.lastName}}</div>
                                            <div class="time hidden-xs">{{message.sendDate |
                                                date:'yyyy-MM-dd HH:mm:ss '}}</div>
                                            <div class="text">{{message.content}}</div>
                                        </div>
                                    </div>
                                    <div class="conversation-item item-right clearfix"
                                        ng-show="{{message.whoSendTheMessage.userId==loggedUser}}">
                                        <div class="conversation-user">
                                            <img src="lib/app/img/user.jpg" style="width: 50px;" alt="">
                                        </div>
                                        <div class="conversation-body">
                                            <div class="name">{{message.whoSendTheMessage.firstName}}&nbsp;{{message.whoSendTheMessage.lastName}}</div>
                                            <div class="time hidden-xs">{{message.sendDate |
                                                date:'yyyy-MM-dd HH:mm:ss '}}</div>
                                            <div class="text">{{message.content}}</div>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </div>
                    </form> 
                </div>
            </div>
            <div class="conversation-new-message message-box">
                                    <form>
                                        <div class="form-group row">
                                            <textarea class="form-control pull-left" rows="2" name="messagebox"
                                                ng-model="message.content" placeholder="Enter your message..."></textarea>
                                            <button type="submit" ng-click="saveMessage();"
                                                class="btn btn-success  fa fa-paper-plane message-button"></button>
                                        </div>
                                        <div class="clearfix"></div>
                                    </form>
                                </div>
        </div> 

这是控制器页面..加载索引页面时,滚动条必须位于底部.....

 define([ "angular", "app","atmosphere", "services/ajaxService", "services/userservice","services/context-service","services/atmosphere-service", "factory/atmosphere-factory" ],
                function(angular, app, atmosphere) {
                var conversationController = app.controller("ConversationController",
                            ["$log","$scope","AjaxService","UserService","$window","ContextService","$timeout","AtmosphereService","AtmosphereFactory",
                        function($log, $scope, ajaxService, UserService, $window, contextService,$timeout,AtmosphereService,AtmosphereFactory) {
                            console.log("conversation controller");
                            var self = $scope; 
                            self.pageNo = -1;
                            self.pageSize = 10;
                            self.isMore = true;
                            var url ="";
                            $scope.value= [];
                            var messageBelongTo=0;
                            self.message = {
                                    "content" : "",
                                    "complexContent" : {
                                        "header" : "Sample",
                                        "image" : "sample",
                                        "metaData" : "image"
                                    },
                                    "contentType" : "TEXT",
                                    "sendDate" : null,
                                    "whenDeliveredInServer" : null,
                                    "whoSendTheMessage" : {
                                        "userId" : 0
                                    },
                                    "messageBelongTo" : {
                                        "conversationId" : 0
                                    } 
                                };

                            self.loggedUser = contextService.userData.userId;
                             self.more = function() { 
                                 if (!self.isMore) {
                                        return;
                                    }
                                    self.pageNo += 1;
                                console.log("Init conversation controller"); 
                                messageBelongTo=contextService.selectedConversationId; 
                                var check=null; 
                                if(contextService.backUrl=='inbox'){ 
                                    check = contextService.getUrl("messagelist");
                                    messageBelongTo=contextService.selectedConversationId;
                                    check += "/" +messageBelongTo + '/' + self.pageNo + '/' + self.pageSize;
                                } 
                                else{  
                                    check = contextService.getUrl("contactmessagelist");
                                    console.log("userId",contextService.userData.userId);
                                    console.log("contactId",contextService.selectedContact);
                                    check +="/"+contextService.userData.userId+ '/' + self.pageNo + '/' + self.pageSize +"?contactId=" +contextService.selectedContact;
                                }
                                ajaxService.get({
                                    url : check,
                                         success : function(data) {  
                                        if( data.responseSuccess){  
                                            $log.log("Success!", angular.fromJson(data.result));
                                            if($scope.value.length !=0){
                                                messageBelongTo= $scope.value[0]['messageBelongTo']['conversationId'];
                                            } 
                                            console.log('Conversatio n Id is'+messageBelongTo);
                                            if (data.result.length === 0) {
                                                self.isMore = false;
                                            }
                                            for (var i = 0; i < data.result.length; i++) {
                                                $scope.value.push(data.result[i]);
                                            }
                                            if($scope.value.length !=0){
                                                messageBelongTo= $scope.value[0]['messageBelongTo']['conversationId'];
                                            } 

                                            console.log('Conversatio n Id is'+messageBelongTo);
                                            $scope.$apply();          
                                        } 
                                        else if( data.responseError){
                                            $scope.value = []; 
                                        } 
                                        $scope.isAjax = false;
                                        $scope.$apply();
                                        $timeout(function(){
                                            //$("html, body").animate({ scrollTop: $(document).height() }, "fast"); 
                                        //$("html, body").animate({ scrollTop: 150000 }, 2000);
                                         //angular.element(".conversation-wrapper").scrollTop(angular.element(".conversation-wrapper")[0].scrollHeight);
                                        },200); 

                                    },
                                    error : function(data) {
                                        $log.log("Error: ", data);
                                        $scope.isAjax = false;
                                        $scope.$apply();
                                    }
                                });
                            };
                             self.more();
                            $scope.saveMessage = function() {  
                                var WhoSendTheMessage = self.loggedUser;
                                self.message.whoSendTheMessage.userId=WhoSendTheMessage;
                                console.log("The use is",contextService.userData.firstName+contextService.userData.lastName);
                                console.log("The userId is",WhoSendTheMessage);
                                self.message.messageBelongTo.conversationId=messageBelongTo; 
                                $scope.isAjax = true;
                                var url ="";
                                if($scope.value){
                                    url= contextService.getUrl("sendmessage")+"?loggedUser="+contextService.userData.userId+"&contactSelected="+contextService.selectedContact;

                                }else{
                                    url= contextService.getUrl("sendmessage")+"?loggedUser="+contextService.userData.userId+"&contactSelected="+contextService.selectedContact;

                                }  
                                ajaxService.post({
                                        url : url,
                                        data : angular.toJson(self.message),
                                        headers : {
                                            "Content-Type" : "application/json;charset=utf-8"
                                        },
                                        success : function(data) { 
                                            console.log("check question",data);
                                            console.log(JSON.stringify(data));
                                            //clear Text box
                                            $scope.value.push(data);
                                            self.message.content="";
                                            **$('.conversation-wrapper').scrollTop($('.conversation-wrapper').height());**
                                            $scope.isAjax = false;
                                            $scope.$apply();

                                        },
                                        error : function(data) {
                                            $log.log("project creation error block: ",data);
                                            $scope.isAjax = false;
                                            $scope.$apply();
                                        }
                                }); 
                            } 

                             //Receive Message
                             $scope.$on('messagereceived',function(event,msg){  
                                 if (!("Notification" in $window)) {
                                  console.log("called");
                              }
                                 else if (Notification.permission === "granted") {
                                       var options = {
                                           body: self.message.content,
                                           icon: "lib/app/img/user.jpg",

                                     };
                             var notification = new Notification(contextService.userData.firstName+contextService.userData.lastName,options);
                            }
                            else if (Notification.permission !== 'denied') {
                                  console.log("grantedsss");
                                     Notification.requestPermission(function (permission) {
                                  if (permission === "granted") {
                                          var options = {
                                            body: self.message.content,
                                            icon: "lib/app/img/user.jpg",

                                                 };
                              var notification = new Notification(contextService.userData.firstName+contextService.userData.lastName,options);
                                  }
                                });
                              }
                                 $scope.value.push(msg.message);  
                                 $scope.isAjax = false;
                                 $scope.$apply(); 
                             }); 

                        } ]);
                    return conversationController; 
                }); 

1 个答案:

答案 0 :(得分:0)

将id添加到您的底层html元素

<div class="conversation-new-message message-box" id="my-bottom-element">

并在控制器中添加所有消息或其他数据时添加这些行。

$location.hash('my-bottom-element');
$anchorScroll();

请记住在控制器中包含$location$anchorScroll个依赖项。