Make list scrollable

Author: tbranyen

index.html

@@ -20,6 +20,7 @@
           <ul id="list-api">
             <a href="#"><li class="brand">NodeGit</li></a>
             <li><input tabindex="1" placeholder="Search API" type="search"></li>
+            <div class="scrollable"></div>
           </ul>
           <div class="api-content">
             <div class="about">

scripts/api.js

@@ -11,12 +11,15 @@
   getAPI("wip").then(function(resp) {
     var listApi = $("#list-api");
     var content = $(".api-content");
+    var scrollable = listApi.find(".scrollable");
 
     var contentTemplate = combyne($(".api-content script").eq(1).html().trim());
 
     resp.forEach(function(ctor) {
       // Add nav entry.
-      var anchor = $("<a href='#" + ctor.jsClassName + "'><li>" + ctor.jsClassName + "</li><ul class='subnav'></ul></a>").appendTo(listApi);
+      var anchor = $("<a href='#" + ctor.jsClassName + "'><li>" + ctor.jsClassName + "</li><ul class='subnav'></ul></a>").appendTo(scrollable);
+
+      scrollable.height($("html").innerHeight() - 160);
 
       // Add new content.
       var contentOutput = contentTemplate.render(ctor);

styles/api.css

@@ -151,3 +151,7 @@ ul.api-contents table h3 {
 .functions h4 {
   color: #7A7A7A;
 }
+
+.scrollable {
+  overflow-y: auto;
+}