Angular Material md-toolbar/md-content 双滚动条 [英] Angular Material md-toolbar/md-content double scroll bar

查看：34
本文介绍了Angular Material md-toolbar/md-content 双滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网站创建两个滚动条时遇到问题.我正在使用 md-toolbar 作为我的导航(我想一直保持在顶部)和 md-content 来保存我的内容.当我滚动时，导航保持在顶部，但会创建一个额外的滚动条.(见图片右侧有两个滚动条)

这是我的 index.html:

<!--顶部工具栏--><md-toolbar class="md-shadow-bottom-z-1"><div class="md-toolbar-tools"><md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-md1 aria-label="Menu"><md-icon>菜单</md-icon></md-button><a href="/home"><h1>Troo News</h1></a><span flex></span><md-button class="md-icon-button" ng-click="" hide-gt-md1 aria-label="搜索"><md-icon>搜索</md-icon></md-button>

</md-工具栏><!--左侧导航栏--><div layout="row" layout-fill flex><md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left"><md-toolbar></md-toolbar><md-content flex role="导航"><md-list><md-list-item ng-repeat="app.menu 中的项目" ng-click="app.navigateTo(item.link)"><md-icon>{{item.icon}}</md-icon><p>{{item.title}}</p></md-list-item></md-list></md-content></md-sidenav><div layout="column" layout-fill ng-viewport></div>

<div ng-view class="content"></div>

还有我的卡片视图的 html:

<section class="content-section"><div layout="column" layout-align="center" ng-style="{'width': '100%'}"><div class='md-padding' layout="row" layout-align="center" flex-offset-sm="0" flex-offset-md="0" flex-offset-lg="0" flex-offset-gt-lg="0" layout-wrap><md-card ng-repeat="article in home.articles"><img ng-src="{{article.imagePath}}" class="md-card-image" alt="测试图片"><md-card-title><md-card-title-text><a href="/article/{{article.id}}"><span class="md-headline">{{article.title}}</span></a></md-card-title-text></md-card-title><md-card-content><p>{{article.text}}</p></md-card-content><md-card-actions layout="row" layout-align="end center"><md-button class="md-icon-button" aria-label="报告"><md-icon class="material-icons">报告问题</md-icon></md-button><md-button class="md-icon-button" aria-label="Share"><md-icon class="material-icons">share</md-icon></md-button></md-card-actions></md-card>

</节></md-content>

还有我的 CSS:

body {背景色:#EEEEEE；}md-工具栏{z-索引:100；}一种 {文字装饰:无；颜色:黑色;}一个:悬停{颜色:#3F51B5；}MD卡{宽度:400px；}

解决方案

工具栏贴在 md-content 而不是 body -> 内部滚动条和像 angular material 的网站一样，他们移除了主滚动条并使用:身体 {溢出:隐藏；最大宽度:100%；最大高度:100%；并且只保留内部的.

I am having an issue with my site creating two scroll bars. I am using md-toolbar for my nav (which I want to be stuck to the top throughout) and md-content to hold my content. When I scroll the nav stays stuck to the top but creates an extra scroll bar. (see to the right of the pic there is two scroll bars)

Here is my index.html: 

<body ng-cloak ng-app="TrooNews" ng-controller="AppController as app">

        <!--top toolbar-->
        <md-toolbar class="md-shadow-bottom-z-1">
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-md1 aria-label="Menu">
                    <md-icon>menu</md-icon>
                </md-button>
                <a href="/home"><h1>Troo News</h1></a>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="" hide-gt-md1 aria-label="Search">
                    <md-icon>search</md-icon>
                </md-button>
            </div>
        </md-toolbar>

        <!--left sidenav-->
        <div layout="row" layout-fill flex>
            <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
                <md-toolbar></md-toolbar>
                <md-content flex role="navigation">
                    <md-list>
                        <md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)">
                            <md-icon>{{item.icon}}</md-icon>
                            <p>{{item.title}}</p>
                        </md-list-item>
                    </md-list>
                </md-content>
            </md-sidenav>
            <div layout="column" layout-fill ng-viewport></div>
        </div>

        <div ng-view class="content"></div>

    </body>

And my html for my card view:

<md-content class="container-fluid">
    <section class="content-section">
      <div layout="column" layout-align="center" ng-style="{'width': '100%'}">
        <div class='md-padding' layout="row" layout-align="center" flex-offset-sm="0" flex-offset-md="0" flex-offset-lg="0" flex-offset-gt-lg="0" layout-wrap>
          <md-card ng-repeat="article in home.articles">
            <img ng-src="{{article.imagePath}}" class="md-card-image" alt="Test image">
            <md-card-title>
              <md-card-title-text>
                <a href="/article/{{article.id}}"><span class="md-headline">{{article.title}}</span></a>
              </md-card-title-text>
            </md-card-title>
            <md-card-content>
              <p>
                {{article.text}}
              </p>
            </md-card-content>
            <md-card-actions layout="row" layout-align="end center">
              <md-button class="md-icon-button" aria-label="Report">
                <md-icon class="material-icons">report problem</md-icon>
              </md-button>
              <md-button class="md-icon-button" aria-label="Share">
                <md-icon class="material-icons">share</md-icon>
              </md-button>
            </md-card-actions>
          </md-card>
        </div>
      </div>
    </section>
</md-content>

And my CSS: 

body {
    background-color: #EEEEEE;
}

md-toolbar {
    z-index: 100;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color:#3F51B5;
}

md-card {
    width:400px;
}

解决方案

The toolbar sticks to the md-content not the body -> the inner scrollbar and like the website of angular material they remove the main scroll and use: body { overflow: hidden; max-width: 100%; max-height: 100%; } and keep the internal one only.

这篇关于Angular Material md-toolbar/md-content 双滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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