Add `contentScroll` option to allow for content scrolling to be enabled/disabled...

Visual test updated with this option.

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index c71f2218f09e4ad5b86e9ce7780c3b4a132b718e..8af94f56b07919c8a4ab94149d5a5d57b7249ed8 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -165,8 +165,7 @@ class OffCanvas {
    */
   open(event, trigger) {
     if (this.$element.hasClass('is-open') || this.isRevealed) { return; }
-    var _this = this,
-        $body = $(document.body);
+    var _this = this;
 
     if (this.options.forceTo === 'top') {
       window.scrollTo(0, 0);
@@ -178,16 +177,19 @@ class OffCanvas {
      * Fires when the off-canvas menu opens.
      * @event OffCanvas#opened
      */
-    $('body').addClass('is-off-canvas-open');
     _this.$element.addClass('is-open')
 
     this.$triggers.attr('aria-expanded', 'true');
     this.$element.attr('aria-hidden', 'false')
         .trigger('opened.zf.offcanvas');
 
+    // If `contentScroll` is set to false, add class and disable scrolling on touch devices.
+    if (this.options.contentScroll == false) {
+      $('body').addClass('is-off-canvas-open').on('touchmove', this._stopScrolling);
+    }
+
     // If we have an overlay lets make it visible.
     if (this.options.contentOverlay) {
-       $('body').on('touchmove', this._stopScrolling);
       this.$overlay.addClass('is-visible');
     }
 
@@ -246,7 +248,6 @@ class OffCanvas {
 
     var _this = this;
 
-    $('body').removeClass('is-off-canvas-open');
     _this.$element.removeClass('is-open');
 
     this.$element.attr('aria-hidden', 'true')
@@ -256,9 +257,13 @@ class OffCanvas {
        */
         .trigger('closed.zf.offcanvas');
 
+    // If `contentScroll` is set to false, remove class and re-enable scrolling on touch devices.
+    if (this.options.contentScroll == false) {
+      $('body').removeClass('is-off-canvas-open').off('touchmove', this._stopScrolling);
+    }
+
     // Remove `is-visible` class from overlay.
     if (this.options.contentOverlay) {
-       $('body').off('touchmove', this._stopScrolling);
       this.$overlay.removeClass('is-visible');
     }
 
@@ -330,6 +335,13 @@ OffCanvas.defaults = {
    */
   contentOverlay: true,
 
+  /**
+   * Enable/disable scrolling of the main content when an off canvas panel is open.
+   * @option
+   * @example true
+   */
+  contentScroll: true,
+
   /**
    * Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
    * @option

diff --git a/test/visual/offcanvas/all-options.html b/test/visual/offcanvas/all-options.html
index f4820103fe01aec770ba69087e9cd719b4c27498..ddfafe19a5aa82d3f1ced63eed36683bf76ecdf4 100644 (file)
--- a/test/visual/offcanvas/all-options.html
+++ b/test/visual/offcanvas/all-options.html
@@ -23,7 +23,7 @@
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
-        <h3>This is a right off-canvas panel</h3>
+        <h3>This is a right off-canvas panel.</h3>
       </div>
 
       <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas>
@@ -37,7 +37,7 @@
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
-        <h3>This is a bottom off-canvas panel</h3>
+        <h3>This is a bottom off-canvas panel.</h3>
       </div>
 
       <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
@@ -82,6 +82,13 @@
         <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
       </div>
 
+      <div class="off-canvas position-left" id="noScroll" data-off-canvas data-content-scroll="false">
+        <button class="close-button" aria-label="Close panel" type="button" data-close>
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h3>This is a left off-canvas panel with content scroll disabled.</h3>
+      </div>
+
       <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-content-overlay="false">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
@@ -119,6 +126,7 @@
           </div>
 
           <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="noScroll">No scroll</button>
             <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
             <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
           </div>
@@ -169,6 +177,7 @@
           </div>
 
           <div class="button-group expanded">
+            <button type="button" class="button" data-toggle="noScroll">No scroll</button>
             <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
             <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
           </div>