Angularjs:滚动到 div 的底部 [英] Angularjs : Scroll to bottom of div

查看：23
本文介绍了Angularjs:滚动到 div 的底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法滚动到最后一条消息.

var app=angular.module('myApp', ['ngMaterial']);app.controller('ChatCtrl', function($window, $anchorScroll){var self = this;self.messageWindowHeight = parseInt($window.innerHeight - 170) + 'px';self.messages = [];for(var i = 1 ; i<=200;i ++){self.messages.push(i);}self.user = { 文本:""};self.send = function(){self.messages.push(angular.copy(self.user.text));self.user.text = "";}});app.directive('scrollToBottom', function($timeout, $window) {返回 {范围: {滚动到底部:="},限制:'A'，链接:函数(范围，元素，属性){scope.$watchCollection('scrollToBottom', function(newVal) {如果(新值){$超时(功能(){element[0].scrollTop = element[0].scrollHeight;}, 0);}});}};});

/* 样式在这里 */.chat-box {填充:8px；边框半径:8px；}.message-box {边框顶部:1px 实心 #E0E0E0;位置:固定；右:0；底部:0；宽度:100%；高度:120px；背景:白色；}.信息 {溢出:滚动；边距:4px；边框:1px 实心 #E0E0E0;-webkit-border-radius: 8px;-moz-border-radius: 8px;边框半径:8px；高度:110px；}

<头><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"><body ng-app='myApp' layout="column" layout-fill ng-controller="ChatCtrl as ctrl"><!-- 内容从这里开始--><md-toolbar class="md-whiteframe-z2"><div class="md-toolbar-tools"><h2>你好

</md-工具栏><md-content layout="column" style="background-color: #F5F5F5;"ng-style="{'height':ctrl.messageWindowHeight}"><div class="chat-box"><ol class="discussion" scroll-to-bottom="ctrl.messages"><li ng-repeat="消息在 ctrl.messages track by $index" id="msg-{{$index}}">{{信息}}</ol>

</md-content><form name="userForm" novalidate ng-submit="ctrl.send()" layout="row" layout-padding layout-align="center center" class="message-box"><div class="message" flex><md-input-container class="md-block"><input type="text" name="text" ng-model="ctrl.user.text"/></md-input-container>

<md-button class="md-icon-button" type="submit">发送</md-button></表单><!-- 内容到此结束--><!-- 角度材料依赖--><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script><script src="script.js"></script></html>

这是我的代码的plunk.

解决方案

将 scroll-to-bottom 指令移动到 md-content 元素

 <md-content ͟s͟c͟r͟o͟l͟l͟-͟t͟o͟-͟b͟o͟t͟t͟o͟t͟t͟o͟m͟=͟͟c͟t͟r͟l͟.͟m͟e͟s͟͟""布局>样式=背景颜色:#F5F5F5；"ng-style="{'height':ctrl.messageWindowHeight}"><div class="chat-box"><!-- 不在这里--><ol class="讨论";̶s̶c̶r̶o̶l̶l̶-̶t̶o̶-̶b̶o̶t̶t̶o̶m̶=̶"̶c̶t̶r̶l̶.̶m̶e̶s̶s̶a̶g̶e̶̶s̶s̶s̶a̶g̶e̶s<li ng-repeat="message in ctrl.messages track by $index";id="msg-{{$index}}">{{信息}}</ol>

</md-content>

scroll-to-bottom 指令需要对实际滚动的元素进行操作.滚动的元素是 <md-content> 元素，因为它的高度受到由它的 ng-style 指令.<ol> 元素没有滚动，它的 scrollHeight 属性是恒定的.

演示

var app=angular.module('myApp', ['ngMaterial']);app.controller('ChatCtrl', function($window, $anchorScroll){var self = this;self.messageWindowHeight = parseInt($window.innerHeight - 170) + 'px';self.messages = [];for(var i = 1 ; i<=200;i ++){self.messages.push(i);}self.user = { 文本:""};self.send = function(){self.messages.push(angular.copy(self.user.text));self.user.text = "";}});app.directive('scrollToBottom', function($timeout, $window) {返回 {范围: {滚动到底部:="},限制:'A'，链接:函数(范围，元素，属性){scope.$watchCollection('scrollToBottom', function(newVal) {如果(新值){$超时(功能(){element[0].scrollTop = element[0].scrollHeight;}, 0);}});}};});

/* 样式在这里 */.chat-box {填充:8px；边框半径:8px；}.message-box {边框顶部:1px 实心 #E0E0E0;位置:固定；右:0；底部:0；宽度:100%；高度:120px；背景:白色；}.信息 {溢出:滚动；边距:4px；边框:1px 实心 #E0E0E0;-webkit-border-radius: 8px;-moz-border-radius: 8px;边框半径:8px；高度:110px；}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script><body ng-app='myApp' layout="column" layout-fill ng-controller="ChatCtrl as ctrl"><!-- 内容从这里开始--><md-toolbar class="md-whiteframe-z2"><div class="md-toolbar-tools"><h2>你好

</md-工具栏><md-content scroll-to-bottom="ctrl.messages" layout="column" style="background-color: #F5F5F5;"ng-style="{'height':ctrl.messageWindowHeight}"><div class="chat-box"><ol class="讨论"><li ng-repeat="消息在 ctrl.messages track by $index" id="msg-{{$index}}">{{信息}}</ol>

</md-content><form name="userForm" novalidate ng-submit="ctrl.send()" layout="row" layout-padding layout-align="center center" class="message-box"><div class="message" flex><md-input-container class="md-block"><input type="text" name="text" ng-model="ctrl.user.text"/></md-input-container>

<md-button class="md-icon-button" type="submit">发送</md-button></表单>

I'm having trouble scrolling to last message. 

var app=angular.module('myApp', ['ngMaterial'] );
app.controller('ChatCtrl', function($window, $anchorScroll){
  var self = this;
  self.messageWindowHeight = parseInt($window.innerHeight - 170) + 'px';
  self.messages = [];
  for(var i = 1 ; i<=200;i ++){
    self.messages.push(i);
  }
  
  self.user = { text : ""};
  self.send = function(){
    self.messages.push(angular.copy(self.user.text));
    self.user.text = "";
  }
});

app.directive('scrollToBottom', function($timeout, $window) {
    return {
        scope: {
            scrollToBottom: "="
        },
        restrict: 'A',
        link: function(scope, element, attr) {
            scope.$watchCollection('scrollToBottom', function(newVal) {
                if (newVal) {
                    $timeout(function() {
                        element[0].scrollTop =  element[0].scrollHeight;
                    }, 0);
                }

            });
        }
    };
});

/* Styles go here */
.chat-box {
    padding: 8px;
    border-radius: 8px;
}
.message-box {
    border-top: 1px solid #E0E0E0;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: white;
}

.message {
    overflow: scroll;
    margin: 4px;
    border: 1px solid #E0E0E0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    height: 110px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
</head>

<body ng-app='myApp' layout="column" layout-fill ng-controller="ChatCtrl as ctrl">
  <!-- content starts here -->
  <md-toolbar class="md-whiteframe-z2">
    <div class="md-toolbar-tools">
      <h2>
          hello
        </h2>
    </div>
  </md-toolbar>
  <md-content layout="column" style="background-color: #F5F5F5;"
              ng-style="{'height':ctrl.messageWindowHeight}">
      <div class="chat-box">
        <ol class="discussion" scroll-to-bottom="ctrl.messages">
          <li ng-repeat="message in ctrl.messages track by $index" id="msg-{{$index}}">
            {{message}}
          </li>
        </ol>
      </div>
  </md-content>
  <form name="userForm" novalidate ng-submit="ctrl.send()" layout="row" layout-padding layout-align="center center" class="message-box">
    <div class="message" flex>
      <md-input-container class="md-block">
        <input type="text" name="text" ng-model="ctrl.user.text" />
      </md-input-container>
    </div>
    <md-button class="md-icon-button" type="submit">
      send
    </md-button>
  </form>

  <!-- content ends here -->


  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>

  <script src="script.js"></script>
</body>

</html>

Here's a plunk of my code.

解决方案

Move the scroll-to-bottom directive to the md-content element

 <!-- MOVE directive here -->
 <md-content ͟s͟c͟r͟o͟l͟l͟-͟t͟o͟-͟b͟o͟t͟t͟o͟m͟=͟"͟c͟t͟r͟l͟.͟m͟e͟s͟s͟a͟g͟e͟s͟"͟ layout="column"
             style="background-color: #F5F5F5;" 
             ng-style="{'height':ctrl.messageWindowHeight}">
      <div class="chat-box">
        <!-- NOT HERE -->
        <ol class="discussion" ̶s̶c̶r̶o̶l̶l̶-̶t̶o̶-̶b̶o̶t̶t̶o̶m̶=̶"̶c̶t̶r̶l̶.̶m̶e̶s̶s̶a̶g̶e̶s̶"̶ >
          <li ng-repeat="message in ctrl.messages track by $index" id="msg-{{$index}}">
            {{message}}
          </li>
        </ol>
      </div>
  </md-content>

The scroll-to-bottom directive needs to operate on the element that is actually scrolling. The element that is scrolling is the <md-content> element because its height is restricted by the CSS created by its ng-style directive. The <ol> element is not scrolling and its scrollHeight property is constant.

The DEMO

var app=angular.module('myApp', ['ngMaterial'] );
app.controller('ChatCtrl', function($window, $anchorScroll){
  var self = this;
  self.messageWindowHeight = parseInt($window.innerHeight - 170) + 'px';
  self.messages = [];
  for(var i = 1 ; i<=200;i ++){
    self.messages.push(i);
  }
  
  self.user = { text : ""};
  self.send = function(){
    self.messages.push(angular.copy(self.user.text));
    self.user.text = "";
  }
});

app.directive('scrollToBottom', function($timeout, $window) {
    return {
        scope: {
            scrollToBottom: "="
        },
        restrict: 'A',
        link: function(scope, element, attr) {
            scope.$watchCollection('scrollToBottom', function(newVal) {
                if (newVal) {
                    $timeout(function() {
                        element[0].scrollTop =  element[0].scrollHeight;
                    }, 0);
                }

            });
        }
    };
});

/* Styles go here */
.chat-box {
    padding: 8px;
    border-radius: 8px;
}
.message-box {
    border-top: 1px solid #E0E0E0;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: white;
}

.message {
    overflow: scroll;
    margin: 4px;
    border: 1px solid #E0E0E0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    height: 110px;
}

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>
<body ng-app='myApp' layout="column" layout-fill ng-controller="ChatCtrl as ctrl">
  <!-- content starts here -->
  <md-toolbar class="md-whiteframe-z2">
    <div class="md-toolbar-tools">
      <h2>
          hello
        </h2>
    </div>
  </md-toolbar>
  <md-content scroll-to-bottom="ctrl.messages" layout="column" style="background-color: #F5F5F5;" ng-style="{'height':ctrl.messageWindowHeight}">
      <div class="chat-box">
        <ol class="discussion">
          <li ng-repeat="message in ctrl.messages track by $index" id="msg-{{$index}}">
            {{message}}
          </li>
        </ol>
      </div>
  </md-content>
  <form name="userForm" novalidate ng-submit="ctrl.send()" layout="row" layout-padding layout-align="center center" class="message-box">
    <div class="message" flex>
      <md-input-container class="md-block">
        <input type="text" name="text" ng-model="ctrl.user.text" />
      </md-input-container>
    </div>
    <md-button class="md-icon-button" type="submit">
      send
    </md-button>
  </form>
</body>

这篇关于Angularjs:滚动到 div 的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆