diff --git a/src/styl/abilities/scrollable.styl b/src/styl/abilities/scrollable.styl
new file mode 100644
index 0000000..94290d2
--- /dev/null
+++ b/src/styl/abilities/scrollable.styl
@@ -0,0 +1,34 @@
+.scrollable
+    &:not([data-scroll])
+    &[data-scroll="auto"]
+        overflow: auto
+
+    &[data-scroll="both"]
+        overflow: scroll
+
+    &[data-scroll="none"]
+        overflow: hidden
+
+    &[data-scroll="x"]
+        overflow-x: auto
+
+    &[data-scroll="y"]
+        overflow-y: auto
+
+    &[data-scroll="x-always"]
+        overflow-x: scroll
+
+    &[data-scroll="y-always"]
+        overflow-y: scroll
+
+    &[data-scroll="x-never"]
+        overflow-x: hidden
+
+    &[data-scroll="y-never"]
+        overflow-y: hidden
+
+.scrollable-y
+    overflow-y: auto
+
+.scrollable-x
+    overflow-x: auto
diff --git a/src/styl/main.styl b/src/styl/main.styl
index a91a821..334e967 100644
--- a/src/styl/main.styl
+++ b/src/styl/main.styl
@@ -11,6 +11,7 @@
 @require "core/align.styl";
 @require "abilities/closeable.styl";
 @require "abilities/fillable.styl";
+@require "abilities/scrollable.styl";
 @require "animation/animation.styl";
 @require "animation/transition.styl";
 @require "badge/badge.styl";
diff --git a/test/views/abilities.hbs b/test/views/abilities.hbs
index 4c2abde..2f2b07c 100644
--- a/test/views/abilities.hbs
+++ b/test/views/abilities.hbs
@@ -24,5 +24,9 @@
                 </div>
             </div>
         </div>
+
+        <h3>Scrollable</h3>
+        <div class="scrollable" id="scrollable" data-scroll="y">
+        </div>
     </div>
 </section>
\ No newline at end of file