User can drag the blockchain blocks horizontally with the mouse

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -1,7 +1,8 @@
 <div class="blocks-container blockchain-blocks-container" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn" >
     <div class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
-      <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" class="blockLink">&nbsp;</a>
+      <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }" 
+        class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
       <div class="block-height">
         <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
       </div>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -15,6 +15,10 @@
   text-decoration: none;
 }
 
+.blockLink.disabled {
+  pointer-events: none;
+}
+
 .mined-block {
   position: absolute;
   top: 0px;

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -41,7 +41,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   };
 
   constructor(
-    private stateService: StateService,
+    public stateService: StateService,
     private router: Router,
     private cd: ChangeDetectorRef,
   ) { }