Question

嗨所有程序员和天才，

我正在使用angularmaterial v1 demo的md-subheader：

https://material.angularjs.org/latest/demo/subheader

我正在使用这个在移动设备中构建一个页面，问题是当副标题不应该移动时副标题会反弹。这个问题已在下面的链接中解决（使用适当的演示），但我找不到任何解决方案。

https://github.com/angular/material/issues/5862

Answer 1

我遇到了同样的问题，在搜索了一段时间之后，我不得不放弃md-subheader，而是将md-content上方的div放在md-content上作为固定标题。滚动。然后，我有条件地将一个样式应用于div，如果有足够的内容可以滚动，那么会将它碰到滚动条的宽度，这样标题就会与内容对齐。

我通过定义这种风格来做到这一点：

.invisible-scrollbar {
    overflow-y: scroll;
    scrollbar-3dlight-color: white;
    scrollbar-arrow-color: white;
    scrollbar-base-color: white;
    scrollbar-darkshadow-color: white;
    scrollbar-face-color: white;
    scrollbar-highlight-color: white;
    scrollbar-shadow-color: white;
}
.invisible-scrollbar::-webkit-scrollbar {
    opacity: 0;
}

然后将其应用于标题div：

ng-class="{'invisible-scrollbar':vm.resultsCanScroll}"

最后，我检查内容是否在控制器中有一个滚动条，这对md-virtual-repeat来说有点棘手：

// Wait until the next digest so the content is bound before checking the scroll height.
$timeout(function () {
    var scroller = angular.element('#searchResultList .md-virtual-repeat-scroller');
    vm.resultsCanScroll = scroller[0].scrollHeight > scroller.height();
});

当然，如果您有多个md-subheader代码，这对您无效，但这取决于您要做的事情。

在移动设备上滚动时，AngularJS v1材质md-subheader反弹严重

1 个答案: