Question

我正在尝试实现垂直滚动。但由于某种原因，它不会一直滚动到列表的末尾。

我正在使用角度

这是我的代码示例的代码集 - ＆gt; http://codepen.io/GY22/pen/PqeoZv

html代码：

<!-- START SIDEBAR -->
<div id="sidebar" ng-app="DragDrop" ng-controller="AppCtrl">
  <ul>
    <li ng-repeat="user in users" class="circular">
      <p class="initials">{{user.initials}}</p>
    </li>
  </ul>
</div>
<!-- END SIDEBAR -->

css代码：

#sidebar {
  position: fixed;
  width: 120px;
  height: 900px;
  background-color: #03A9F4;
  z-index: 33;
  margin-top: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 100px
}

#userList {
  padding-bottom: 10px !important;
}

ul li {
  margin-left: -22px;
  list-style-type: none;
}

.circle {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background-color: hotpink;
}

.initials {
  margin-left: 25px;
  padding-top: 30px;
  font-weight: bold;
  font-size: 18px;
}

角度代码：

var contentEditor = angular.module("DragDrop", []);

contentEditor.controller('AppCtrl', function($scope) {

  $scope.users = [{
    initials: 'GY'
  }, {
    initials: 'XX'
  }, {
    initials: 'KK'
  }, {
    initials: 'TT'
  }, {
    initials: 'AA'
  }, {
    initials: 'QQ'
  }, {
    initials: 'PP'
  }, {
    initials: 'SS'
  }, {
    initials: 'MM'
  }, {
    initials: 'RS'
  }, {
    initials: 'KL'
  }, {
    initials: 'CJ'
  }, {
    initials: 'RT'
  }, {
    initials: 'DJ'
  }, {
    initials: 'XG'
  }, {
    initials: 'XX'
  }];

});

Answer 1

将#sidebar的高度更改为100%而不是固定的高度。

Answer 2

问题是如果你将div（#sidebar）的高度设置为900px并且div所在的容器更小（比如400px） - 你将无法看到div的最后500px（＃边栏）。

如果您希望高度为当前窗口的100％ - 请尝试使用height：100％而不是：

#sidebar {
  position: fixed;
  width: 120px;
  height: 100%;
  z-index: 33;
  margin-top: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 100px
}

请参阅：http://codepen.io/anon/pen/vOjYKv

Answer 3

您为#sidebar设置了固定高度900px。通过将此值更改为较小的值，您将获得所需的结果。

垂直滚动不会滚动到列表的末尾

3 个答案: