First try to fix issues with smoothscroll and mobile browsers

- See adchsm/Slidebars#257
- See
https://www.adchsm.com/slidebars/help/advanced-usage/scrolling-the-html-or-body-elements/
- See
https://wordpress.org/support/topic/conflict-with-off-canvas-sidebars/
- Addresses scroll lock aswell

css/off-canvas-sidebars.css

@@ -3,9 +3,28 @@
  *
  * @author Jory Hogeveen <[email protected]>
  * @package off-canvas-sidebars
- * @version 0.3
+ * @version 0.3.2
  */
 
+/**
+ * Slidebar CSS overwrites
+ */
+
+html,
+.ocs-initialized html {
+	overflow-y: auto;
+	height: auto;
+}
+[canvas=container],
+.ocs-initialized [canvas=container] {
+	overflow-y: hidden;
+	height: auto;
+}
+
+html.ocs-scroll-lock {
+	overflow-y: hidden;
+}
+
 /**
  * Sidebar Widths (patched from older version of Slidebars)
  */

js/off-canvas-sidebars.js

@@ -4,7 +4,7 @@
  * ocsOffCanvasSidebars
  * @author Jory Hogeveen <[email protected]>
  * @package off-canvas-sidebars
- * @version 0.3
+ * @version 0.3.2
  * @global ocsOffCanvasSidebars
  */
 
@@ -23,10 +23,14 @@ if ( typeof ocsOffCanvasSidebars == 'undefined' ) {
 
 	ocsOffCanvasSidebars.slidebarsController = false;
 	ocsOffCanvasSidebars.useAttributeSettings = false;
+	ocsOffCanvasSidebars.container = false;
+	ocsOffCanvasSidebars._html = $( 'html' );
 	ocsOffCanvasSidebars._touchmove = false;
 
 	ocsOffCanvasSidebars.init = function() {
 
+		ocsOffCanvasSidebars.container = $( '[canvas=container]' );
+
 		/**
 		 * Function call before initializing
 		 * @since  0.3
@@ -44,6 +48,8 @@ if ( typeof ocsOffCanvasSidebars == 'undefined' ) {
 		// Initialize slidebars
 		ocsOffCanvasSidebars.slidebarsController.init();
 
+		ocsOffCanvasSidebars._html.addClass('ocs-initialized');
+
 		/**
 		 * Function call after initializing
 		 * @since  0.3
@@ -255,11 +261,17 @@ if ( typeof ocsOffCanvasSidebars == 'undefined' ) {
 		// Add close class to canvas container when Slidebar is opened
 		$( controller.events ).on( 'opening', function () {
 			$( '[canvas]' ).addClass( prefix + '-close-any' );
+			ocsOffCanvasSidebars._html.addClass( 'ocs-sidebar-active' );
+			if ( ocsOffCanvasSidebars._getSetting( 'scroll_lock' ) ) {
+				ocsOffCanvasSidebars._html.addClass( 'ocs-scroll-lock' );
+			}
 		} );
 
 		// Add close class to canvas container when Slidebar is opened
 		$( controller.events ).on( 'closing', function () {
 			$( '[canvas]' ).removeClass( prefix + '-close-any' );
+			ocsOffCanvasSidebars._html.removeClass( 'ocs-sidebar-active' );
+			ocsOffCanvasSidebars._html.removeClass( 'ocs-scroll-lock' );
 		} );