Adding overflow markers for preview frame scroller

css/preview-film-section.css

@@ -1,10 +1,53 @@
-
 .preview-list-wrapper {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+.preview-list-scroller {
   overflow-y: scroll;
   overflow-x: hidden;
   height: 100%;
 }
 
+.top-overflow,
+.bottom-overflow {
+  height: 20px;
+  position: absolute;
+  left: 0;
+  right: 12px;
+  
+  -webkit-transition: all 500ms ease-out;
+  -moz-transition: all 500ms ease-out;
+  -ms-transition: all 500ms ease-out;
+  -o-transition: all 500ms ease-out;
+  transition: all 500ms ease-out;
+
+  background-image: linear-gradient(45deg, rgba(0,0,0, 0.5) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.5) 75%, rgba(0,0,0, 0.5)),
+                    linear-gradient(-45deg, rgba(0,0,0, 0.5) 25%, transparent 25%, transparent 75%, rgba(0,0,0, 0.5) 75%, rgba(0,0,0, 0.5));
+  background-size: 45px 45px;
+  background-repeat: repeat-x;
+  background-position-x: 3px;
+}
+
+.top-overflow {
+  top: -20px;
+}
+
+.bottom-overflow {
+  bottom: -20px;
+  background-position-x: 0;
+  background-position-y: -23px;
+}
+
+.top-overflow-visible .top-overflow {
+  top: 0;
+}
+
+.bottom-overflow-visible .bottom-overflow {
+  bottom: 0;
+}
+
 .preview-list {
   list-style-type: none;
   padding-right: 7px;

index.html

@@ -45,9 +45,13 @@
     <div class='left-column'>
       
       <!-- List of frames: -->
-      <div class="preview-list-wrapper">
+      <div id="preview-list-wrapper" class="preview-list-wrapper">
+        <div id="preview-list-scroller" class="preview-list-scroller">
           <ul class="preview-list" id="preview-list"></ul>
         </div>
+        <div class="top-overflow"></div>
+        <div class="bottom-overflow"></div>
+      </div>
     </div>
 
     <div class='main-column'>
@@ -68,9 +72,6 @@
           <span id="display-fps" class="display-fps">12 FPS</span>
           <input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
         </div>   
-        
-        
-        
       </div>
 
       <div class="application-actions">

js/controller/PreviewFilmController.js

@@ -11,9 +11,14 @@
         $.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
         $.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
         $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
+
+        $('#preview-list-scroller').scroll(this.onScroll_.bind(this))
     };
 
-    ns.PreviewFilmController.prototype.init = function() {};
+    ns.PreviewFilmController.prototype.init = function() {
+
+
+    };
 
     ns.PreviewFilmController.prototype.addFrame = function () {
         this.framesheet.addEmptyFrame();
@@ -36,6 +41,28 @@
         }
     };
 
+    ns.PreviewFilmController.prototype.onScroll_ = function (evt) {
+        var scroller = $('#preview-list-scroller');
+        var scrollerHeight = scroller.height();
+        var scrollTop = scroller.scrollTop();
+        var scrollerContentHeight = $('#preview-list').height();
+        var treshold = 30;
+        var overflowTop = false,
+            overflowBottom = false;
+        if (scrollerHeight < scrollerContentHeight) {
+            if (scrollTop > treshold) {
+                overflowTop = true;
+            }
+            var scrollBottom = (scrollerContentHeight - scrollTop) - scrollerHeight;
+            if (scrollBottom > treshold) {
+                overflowBottom = true;
+            }
+            var wrapper = $('#preview-list-wrapper');
+            wrapper.toggleClass('top-overflow-visible', overflowTop);
+            wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
+        }
+    };
+
     ns.PreviewFilmController.prototype.createPreviews_ = function () {
         
         this.container.html("");
@@ -68,11 +95,11 @@
      */
     ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
         
-        $( "#preview-list" ).sortable({
+        $("#preview-list").sortable({
           placeholder: "preview-tile-drop-proxy",
           update: $.proxy(this.onUpdate_, this)
         });
-        $( "#preview-list" ).disableSelection();
+        $("#preview-list").disableSelection();
     };
 
     /**