flickering scrollbar when using the pagination controls at an Angular Materials data table in an Angular 6 application?

This is a thing! Assuming you are doing something like this, you may see the scrollbar at the right of the browser spaz a bit when you mouse over the pagination controls. This comes from changes inside of a div that has the cdk-overlay-container class on it which is the last element inside of the body tag sitting just before the close body tag. If you don't remember putting that div there it is because you didn't. It is imposed by the CDK. Inside the div are two to four divs depending on if two to four pagination controls are active (you can't page back or go to the beginning of the list if you are on the first page after all, so sometimes two controls will be disabled) with a class of cdk-overlay-connected-position-bounding-box on them and inside of each of these is a div with both cdk-overlay-pane and mat-tooltip-panel at the class setting. These divs nested three tiers deep start out empty, but when you mouse over the pagination controls something gets put inside of them and that causes the page height to change. To fix this put something like this...

.cdk-overlay-container {
   display:none !important;
}

 
 

...inside of styles.css or whatever you have named your "outermost" God stylesheet which has styles that are imposed everywhere in the application as opposed to component-specific stylesheets. You don't want to use an ::ng-deep trick in any of the component stylesheets to try to get this fixed. Slay the serpent by just cutting its head off at the head itself. No subtle surgery! This hack will keep all of the divs I mentioned above from appearing and as best as I can tell this comes with no side effects.

 
 

Addendum 11/24/2018: Perhaps .cdk-overlay-connected-position-bounding-box would be better to use as the class as .cdk-overlay-container can also wrap the div that holds a modal.