docs(scrolling): adjust scrolling demo docs

Author: nivekcode

README.md

@@ -8,7 +8,7 @@
 
 ![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/grid-demo.gif)
 
-Read the README or just simply check out our demo at: https://kreuzerk.github.io/ng-sortgrid/ 
+[Demo](https://kreuzerk.github.io/ng-sortgrid/)
 
 - [Getting started](#getting-started)
   - [Download the module](#download-the-module)
@@ -80,3 +80,21 @@ Alternative you can provide custom styles for the different classes listed bello
 | ng-sg-placeholder | This class is added to the placeholder item which previews where the item is inserted                                                          |
 | ng-sg-dropped     | This class is added as soon after you drop an item. The class will be on the item for 500 milliseconds before it gets removed                  |
 | ng-sg-selected    | This class is added when you press the CMD or the Ctrl Key and Click on an item. It indicates which items are selected for the multi drag&drop |
+
+# Scrolling
+The ng-sortgrid has a *autoScroll* flag which you can use to enable autoScroll. If you enable autoScroll the screen will start to scroll 
+in the following scenario. 
+
+![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/scrolling.png)
+
+- If you drag an element in the top 50px of the screen
+- If you drag an element in the bottom 50px of the screen
+
+## Custom scroll points
+Sometimes its not enough to onyl scroll once you drag over the top view port border. Imagine that you have a fixed navbar 
+at the top of your page. In this case you need to scroll once you drag an element over the navbar.
+
+## Scroll speed (*default 50*)
+The *scrollSpeed* property accepts a number and allows you to specify the scrolling speed.
+
+[Check out the scroll demo](https://kreuzerk.github.io/ng-sortgrid/scrolling)

projects/ng-sortgrid-demo/src/app/scrolling/scrolling.component.html

@@ -1,6 +1,9 @@
 <ngsg-demo-nav [fixed]="true" [height]="height + 'px'" subtitle="Scrolling demo"></ngsg-demo-nav>
-<div class="container">
-  <div class="example-container" style="margin-top: 400px">
+<div class="container" style="margin-top: 400px">
+  <h1>Scrolling</h1>
+  <ngsg-demo-step title="Sample code to enable scrolling with a custom top scroll point." image="scrolling-code.png"></ngsg-demo-step>
+  <ngsg-demo-step title="Scroll down to the bottom of the page, drag an item over the blue header (which is the top scroll point) and watch it scroll 😊"></ngsg-demo-step>
+  <div class="example-container">
     <ngsg-card *ngFor="let item of items"
                ngSortgridItem
                ngSortGridGroup="getting-started"

projects/ng-sortgrid-demo/src/app/shared/step/step.component.html

@@ -1,3 +1,3 @@
 <h5 class="step-title">{{title}}</h5>
-<img [src]="'assets/' + image" class="step-image"/>
+<img *ngIf="image" [src]="'assets/' + image" class="step-image"/>
 <hr/>

projects/ng-sortgrid-demo/src/assets/scrolling-code.png

@@ -8,7 +8,7 @@
 
 ![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/grid-demo.gif)
 
-Read the README or just simply check out our demo at: https://kreuzerk.github.io/ng-sortgrid/ 
+[Demo](https://kreuzerk.github.io/ng-sortgrid/)
 
 - [Getting started](#getting-started)
   - [Download the module](#download-the-module)