diff --git a/js/animate.js b/js/animate.js
index 9945708..7181425 100644
--- a/js/animate.js
+++ b/js/animate.js
@@ -127,6 +127,8 @@ proto.settle = function( previousX ) {
     this.positionSlider();
     this.dispatchEvent( 'settle', null, [ this.selectedIndex ] );
   }
+
+  this.checkVisibility();
 };
 
 proto.shiftWrapCells = function( x ) {
diff --git a/js/drag.js b/js/drag.js
index dcad4fd..479d05d 100644
--- a/js/drag.js
+++ b/js/drag.js
@@ -83,6 +83,8 @@ proto.updateDraggable = function() {
   // disable dragging if less than 2 slides. #278
   if ( this.options.draggable == '>1' ) {
     this.isDraggable = this.slides.length > 1;
+  } else if (this.options.draggable === 'onOverflow') {
+    this.isDraggable = this.viewport.scrollWidth > this.viewport.offsetWidth;
   } else {
     this.isDraggable = this.options.draggable;
   }
diff --git a/js/flickity.js b/js/flickity.js
index f6c5e10..fe4d45c 100644
--- a/js/flickity.js
+++ b/js/flickity.js
@@ -757,6 +757,34 @@ proto.queryCell = function( selector ) {
   return this.getCell( selector );
 };
 
+proto.checkVisibility = function() {
+  var viewportX = this.viewport.getBoundingClientRect().x;
+  var viewportWidth = this.viewport.offsetWidth;
+
+  this.cells.forEach(function (cell) {
+    var cellX = cell.element.getBoundingClientRect().x - viewportX;
+    var isVisible = (
+        (cellX + cell.size.innerWidth > viewportX) && (cellX + cell.size.innerWidth < viewportWidth) ||
+        (cellX > viewportX) && (cellX < viewportWidth)
+    );
+
+    if (isVisible) {
+      cell.element.classList.add('is-visible');
+      cell.element.removeAttribute('aria-hidden');
+      const targetable =  cell.element.querySelectorAll('button, a');
+
+      targetable.forEach(target => target.tabIndex = 0);
+
+    } else {
+      cell.element.classList.remove('is-visible');
+      cell.element.setAttribute('aria-hidden', true);
+      const targetable =  cell.element.querySelectorAll('button, a');
+
+      targetable.forEach(target => target.tabIndex = -1);
+    }
+  });
+};
+
 // -------------------------- events -------------------------- //
 
 proto.uiChange = function() {
diff --git a/js/slide.js b/js/slide.js
index bff86c9..815d278 100644
--- a/js/slide.js
+++ b/js/slide.js
@@ -51,6 +51,8 @@ proto.getLastCell = function() {
 };
 
 proto.select = function() {
+  this.parent.checkVisibility();
+  
   this.cells.forEach( function( cell ) {
     cell.select();
   } );
diff --git a/sandbox/basic.html b/sandbox/basic.html
index c520ca5..cf963ba 100644
--- a/sandbox/basic.html
+++ b/sandbox/basic.html
@@ -143,6 +143,18 @@ <h2>contain, few</h2>
 
   <h2>watch, activate >900px</h2>
 
+  <h2>contain, only draggable if overflow</h2>
+
+  <div class="container variable-width js-flickity"
+       data-flickity-options='{ "contain": true, "cellAlign": "left", "draggable": "onOverflow" }'>
+    <div class="cell n1">1</div>
+    <div class="cell n2">2</div>
+    <div class="cell n3">3</div>
+    <div class="cell n4">4</div>
+    <div class="cell n5">5</div>
+    <div class="cell n6">6</div>
+  </div>
+
   <div id="gallery5" class="container variable-width js-flickity"
     data-flickity-options='{ "wrapAround": true, "watchCSS": true }'>
     <div class="cell n1 w3"></div>