Theming: optimized touch interaction with offcanvas

Author: muratcakir

src/Presentation/SmartStore.Web/Themes/Alpha/Content/_cart.scss

@@ -95,8 +95,6 @@
 .offcanvas-cart-body {
     position: relative;
     flex-grow: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
 	min-height: 100px;
     line-height: 1.5;
 

src/Presentation/SmartStore.Web/Themes/Alpha/Content/shared/_offcanvas.scss

@@ -105,11 +105,6 @@ body.canvas-blocking .canvas-blocker {
     right: auto;
     transform: translate3d($offcanvas-offset-p-neg, 0, 0);
 
-    * {
-        // Fixes Chrome 55+ pan/swipe bug
-        touch-action: pan-y;
-    }
-
     &.offcanvas-right {
         left: auto !important;
         right: 0;
@@ -166,6 +161,13 @@ body.canvas-blocking .canvas-blocker {
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
+    touch-action: none;
+}
+
+.offcanvas-scrollable {
+    touch-action: pan-y;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 

src/Presentation/SmartStore.Web/Themes/Alpha/Scripts/smartstore.responsiveNav.js

@@ -36,6 +36,8 @@
 			tabContent.appendTo(offcanvas.children().first());
 			el.data('tab-content', tabContent).data('offcanvas', offcanvas).addClass('collapsed');
 
+			tabContent.find('.tab-pane').addClass('offcanvas-scrollable');
+
 			el.find('.nav .nav-item')
 		        .attr('data-toggle', 'offcanvas')
 		        .attr('data-placement', 'right')
@@ -49,9 +51,11 @@
 
 			// move .tab-content back to its origin
 			var offcanvas = el.data('offcanvas');
-			el.data('tab-content').appendTo(el);
+			var tabContent = el.data('tab-content');
+			tabContent.appendTo(el);
 			offcanvas.remove();
 
+			tabContent.find('.tab-pane').removeClass('offcanvas-scrollable');
 			el.removeClass('collapsed').removeData('tab-content').removeData('offcanvas');
 
 			el.find('.nav .nav-item')

src/Presentation/SmartStore.Web/Views/Catalog/Partials/OffCanvasCompare.cshtml

@@ -2,7 +2,7 @@
 
 @using SmartStore.Web.Models.Catalog;
 
-<div class="offcanvas-cart-body">
+<div class="offcanvas-cart-body offcanvas-scrollable">
     @if (Model.Items.Count == 0)
     {
         <div class="no-items">

src/Presentation/SmartStore.Web/Views/Common/Partials/ShopBar.Tools.cshtml

@@ -99,7 +99,7 @@
 @using (Html.BeginZoneContent("end", key: "offcanvas-menu"))
 {
 	<aside id="offcanvas-menu" class="offcanvas offcanvas-overlay offcanvas-left offcanvas-shadow" data-blocker="true" data-overlay="true" data-placement="left">
-		<div class="offcanvas-content">
+		<div class="offcanvas-content offcanvas-scrollable">
 			<!-- AJAX -->
 		</div>
 	</aside>

src/Presentation/SmartStore.Web/Views/ShoppingCart/OffCanvasShoppingCart.cshtml

@@ -18,7 +18,7 @@
     }
 }
 
-<div class="offcanvas-cart-body">
+<div class="offcanvas-cart-body offcanvas-scrollable">
 	@if (Model.TotalProducts == 0)
     {
 		<div class="no-items">

src/Presentation/SmartStore.Web/Views/ShoppingCart/OffCanvasWishlist.cshtml

@@ -7,7 +7,7 @@
     int attrMaxLength = Model.ShowProductImages ? 50 : 70;
 }
 
-<div class="offcanvas-cart-body">
+<div class="offcanvas-cart-body offcanvas-scrollable">
 	@if (Model.Items.Count == 0) 
 	{
 		<div class="no-items">