Edit The problem is that the animation of the router forces a fixed position, if I turn off the animation, it fixes it, but I want to use the animation so that I try to figure out how to fix it. This is called animation code, which forces the “fix” in this way to break the scrolling:
function slideToBottom() { return trigger('routerTransition', [ state('void', style({position:'fixed', width:'100%', height:'100%'}) ), state('*', style({position:'fixed', width:'100%', height:'100%'}) ), transition(':enter', [ style({transform: 'translateY(-100%)'}), animate('0.5s ease-in-out', style({transform: 'translateY(0%)'})) ]), transition(':leave', [ style({transform: 'translateY(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateY(100%)'})) ]) ]); }
I am working on a landing page, but I can’t understand for life why it refuses to scroll. Here is the HTML component:
<div class="primaryColorBG" style="height:60%;"> <div fxFlex fxLayoutAlign="center center"> <div [ngStyle]="{'fontSize': '3rem'}" [ngStyle.lt-md]="{'fontSize': '2rem'}" [ngStyle.lt-sm]="{'fontSize': '1.5rem'}" class="text-right title-font accentTextColor">Callum<br>Tech</div> <div style="padding-left:10px;" [ngStyle]="{'fontSize': '2rem'}" [ngStyle.lt-md]="{'fontSize': '1.25rem'}" [ngStyle.lt-sm]="{'fontSize': '0.9rem'}"> <div class="text-left">Angular Framework</div> <div class="text-left">Google Design Standards</div> <div class="text-left">Responsive Layout</div> </div> </div> </div> <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px"> <div class="item item-4" fxFlex="400px">Item 4</div> <div class="item item-5" fxFlex="200px">Item 5</div> </div> <mat-toolbar>test</mat-toolbar>
There is no css or javascript for this page, but a global css file:
@import url('https://fonts.googleapis.com/css?family=Comfortaa'); @import ' ~@angular /material/theming'; // Define a custom mixin that takes in the current theme @mixin theme-color-grabber($theme) { // Parse the theme and create variables for each color in the pallete $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); // Create theme specfic styles .primaryColorBG { background-color: mat-color($primary); } .accentColorBG { background-color: mat-color($accent); } .warnColorBG { background-color: mat-color($warn); } .accentTextColor { color: mat-color($accent) } .primaryTextColor { color: mat-color($primary) } .warnTextColor { color: mat-color($warn) } } .title-font { font-family: "Comfortaa"; } //Palettes $mat-black: ( 50 :
It is called inside the router function under the navbar component
I have no clue why its execution and ive never encountered such a problem, ive checked for “fixed position”, etc., but it doesn't look like anything in my stylesheets that have it
note I am running bootstrap v4 css with my stuff 2
change
Is there enough content to scroll?
Yes, I have an element that is 60% of the page height, and then I added two elements that stack on top of each other, and if you scroll really far, you can see them below