[WO-328] Show and style webkit scrollbars

src/sass/_scaffolding.scss

@@ -4,6 +4,9 @@
 *:before,
 *:after {
     box-sizing: border-box;
+
+    // remove flickering on item touch selection in ios
+    -webkit-tap-highlight-color: transparent !important;
 }
 
 // Body reset
@@ -34,6 +37,24 @@ textarea {
     -moz-osx-font-smoothing: grayscale;
 }
 
+// Custom scrollbars in webkit
+// @see http://css-tricks.com/custom-scrollbars-in-webkit/
+::-webkit-scrollbar {
+    width: 10px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: $color-grey-lighter;
+    border: 3px solid transparent;
+    background-clip: content-box;
+    cursor: pointer;
+    &:hover {
+        background-color: $color-blue;
+    }
+}
+
 // add space at the top since ios7 apps are now fullscreen
 .ios-spacer {
     padding-top: 20px;
@@ -45,14 +66,4 @@ textarea {
 
     // allow text selection
     user-select: none;
-
-    // make scrollbars invisible
-    ::-webkit-scrollbar {
-        width: 0px;
-    }
-
-    // remove flickering on item touch selection in ios
-    * {
-        -webkit-tap-highlight-color: transparent !important;
-    }
 }