Question

我正在使用Angular Material在AngularJS上创建一个照片库（在全屏幕中运行该片段以查看我的问题）。

＆＃13;

var app = angular.module('app', ['ngMaterial']);
app.controller('TitleController', function($scope) {
  $scope.title = 'Gallery';
});
app.controller('GalleryCtrl', function($scope, $http, $q, $mdMedia, $mdDialog) {

  //https://material.angularjs.org/latest/demo/virtualRepeat
  $scope.Images = [],

    //add more images
    $scope.LoadMore = function() {
      for (i = 0; i < 25; i++) {
        var randomWidth = Math.round(Math.random() * (800 - 400) + 400);
        var randomHeight = Math.round(Math.random() * (800 - 400) + 400);

        $scope.Images.push({
          src: "http://placehold.it/" + randomWidth + "x" + randomHeight + "/",
          id: Math.round(Math.random() * 10000)
        });
      };
    }

  $scope.ShowDetails = function(ev, number) {
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;

    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'Home/GetInfo?id=' + number,
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose: true,
      fullscreen: useFullScreen
    })


    $scope.$watch(function() {
      return $mdMedia('xs') || $mdMedia('sm');
    }, function(wantsFullScreen) {
      $scope.customFullscreen = (wantsFullScreen === true);
    });

  };

  function DialogController($scope, $mdDialog) {
    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };

    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    };
  }

  //initial loading 
  $scope.LoadMore();
});

＆＃13;

body {
  background: #eeeeee;
}
html {
  background: #eeeeee;
}
.gridListdemoBasicUsage md-grid-list {
  margin: 8px;
}
.gridListdemoBasicUsage .green {
  background: #b9f6ca;
}
.gridListdemoBasicUsage md-grid-tile {
  transition: all 400ms ease-out 50ms;
}
.responsiveImage {
  max-width: 100%;
  max-height: 100%;
}
md-content {
  background: #eeeeee;
  position: relative;
}
.fit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.toolbardemoScrollShrink .face {
  width: 48px;
  margin: 16px;
  border-radius: 48px;
  border: 1px solid #ddd;
}
.md-toolbar-tools {
  background-color: #259b24;
}
.dialogdemoBasicUsage #popupContainer {
  position: relative;
}
.dialogdemoBasicUsage .footer {
  width: 100%;
  text-align: center;
  margin-left: 20px;
}
.dialogdemoBasicUsage .footer,
.dialogdemoBasicUsage .footer > code {
  font-size: 0.8em;
  margin-top: 50px;
}
.dialogdemoBasicUsage button {
  width: 200px;
}
.dialogdemoBasicUsage div#status {
  color: #c60008;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>

<body ng-app="app" ng-controller="GalleryCtrl as gc" ng-cloak="" id="popupContainer" class="gridListdemoBasicUsage dialogdemoBasicUsage">

  <md-toolbar md-scroll-shrink="" ng-if="true" ng-controller="TitleController">
    <div class="md-toolbar-tools">
      <h3><span>{{title}}</span></h3>
    </div>
  </md-toolbar>

  <md-content style="height:100vh" />
  <md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">
    <md-grid-tile ng-click="ShowDetails($event, n.id)" ng-repeat="n in Images" class="green">
      <img class="responsiveImage" src="{{n.src}}">
      <md-grid-tile-footer>
        <h3>Photo number {{n.id}}</h3>
      </md-grid-tile-footer>
    </md-grid-tile>
  </md-grid-list>

  <section layout="row" layout-sm="column" layout-align="center center" layout-wrap="">
    <md-button class="md-raised md-primary" ng-click="LoadMore()">Primary</md-button>
  </section>
</body>

＆＃13;

全屏，滚动到页面底部，然后按一个按钮加载更多图像。我遇到的问题：我试图让屏幕顶部的工具栏在向下滚动时消失，并在向上滚动时再次出现。但是，会出现2个滚动条，只有正确的滚动条会影响工具栏。左滚动条实际上一直向下滚动到页面上。

我想要的情况：只有一个可见的滚动条向下滚动整个图库，这也会使工具栏显示和消失。我该怎么做？

Answer 1

尝试将overflow-y: hidden;添加到body css规则。

带有缩小工具栏的双滚动条

1 个答案: