AngularJS v1 material md-subheader bounces badly when scrolling on mobile devices

Question

Hi All fellow programmers and geniuses,

I am using md-subheader of angularmaterial v1 demo at:

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

I am building a page in mobile device using this and the problem is that the subheader bounces badly when it should not move a bit. This problem was addressed already in the link below (with proper demo) but I could not find any solution.

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

Answer 1

I had the same issue and after searching for a while, I had to abandon md-subheader and instead I put a div above an md-content that would act as a stationary header when the md-content scrolled. Then I conditionally applied a style to the div that would bump it over the width of a scrollbar if there was enough content to scroll so the header would line up with the content.

I did that by defining this style:

.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;
}

And then applying it to the header div with this:

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

And finally, I check if the content has a scrollbar in the controller which was a little tricky with an 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();
});

Of course this won't help you if you have multiple md-subheader tags, but it depends what you're trying to do.