gpt4 book ai didi

css - Angular material md-content 使用它自己的 Y 滚动条

转载 作者:行者123 更新时间:2023-11-28 16:00:27 26 4
gpt4 key购买 nike

使用 Angular 1.* 和 Angular Material 。

我对插入 <div ng-view></div> 的 View 有疑问和 md-content .如果 View 的高度大于视口(viewport)。它创建了它自己的 Y 滚动条,所以我有 2 个 Y 滚动条彼此相邻。

我能做到overflow-y: hiddenmd-content 上.但是我怎样才能让它到达 View 水平插入视口(viewport)的位置,以便仅使用外部滚动条?

<body ng-app="app">
<md-toolbar class='md-medium-tall'>
<div class="main-title">
<img src="./images/yo-small.png">
<p class="top-title">foo</p>
<h5>Bar</h5>
</div>
</md-toolbar>

<div class="menu-container" layout="row">
<md-sidenav
md-is-locked-open="$mdMedia('min-width: 900px')"
class="md-sidenav-left"
md-whiteframe="0">

<md-menu-content>
<md-menu-item>
<md-button href="#ppv">
<md-icon class="material-icons" menu-align-target="">assessment</md-icon>
PPV</md-button>
</md-menu-item>
</md-menu-content>

</md-sidenav>

<md-content>
<div ng-view></div>
</md-content>
</div>
</body>

<div style="height: 1000px; width: 800px ">
<h1>mom</h1>
</div>

enter image description here

更新:我能够创建一个 hack 来解决这个问题。任何人都可以看到如何使它正常工作吗?

md-content {
overflow-y: hidden;
}

angular.module('app')
.controller('PPVCtrl', ['$scope', function($scope) {


// fix for angular-material responsive issue
document.body.style.height = "800px";
$scope.$on('$destroy', function() {
document.body.style.height = "100%";
});
}]);

最佳答案

这实际上是有意为之的行为。 mdContent 指令被定义为具有自己的滚动条的可滚动内容的 block 元素,并且只应在您希望嵌套滚动发生的地方使用。常见用法是在对话框、侧边栏和底部工作表元素中。

https://material.angularjs.org/latest/api/directive/mdContent

关于css - Angular material md-content 使用它自己的 Y 滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40249431/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com