Custom horizontal scrollbar support

Author: spencerfinnell

app/integrations/woocommerce/wc-template-functions.php

@@ -78,6 +78,7 @@ function woocommerce_output_product_categories( $args = [] ) {
 	if ( $total > 5 ) {
 		$product_categories = array_slice( $product_categories, 0, 5 );
 	}
+
 	// End modification.
 	if ( ! $product_categories ) {
 		return false;

package-lock.json

@@ -36,6 +36,7 @@
 		"postcss-loader": "3.0.0",
 		"raw-loader": "3.1.0",
 		"sass-loader": "7.2.0",
+		"simplebar": "4.1.0",
 		"stylelint": "10.1.0",
 		"stylelint-config-wordpress": "14.0.0",
 		"svg-sprite-loader": "4.1.6",

package.json

@@ -1,3 +1,8 @@
+/**
+ * Extenal dependencies.
+ */
+import SimpleBar from 'simplebar';
+
 /**
  * Scroll a horizontal menu to the active item.
  *
@@ -11,6 +16,8 @@ const horizontalMenu = ( menuClass, activeClass ) => {
 		return;
 	}
 
+	// Custom scrolling.
+	const simpleBar = new SimpleBar( menu );
 	const activeLink = document.querySelector( `${ menuClass } ${ activeClass }` );
 
 	if ( ! activeLink ) {
@@ -20,7 +27,7 @@ const horizontalMenu = ( menuClass, activeClass ) => {
 	const activeOffset = activeLink.getBoundingClientRect();
 	const menuOffset = menu.getBoundingClientRect();
 
-	menu.scrollLeft = activeOffset.x + ( activeOffset.width / 2 ) + menu.scrollLeft - ( menuOffset.width / 2 );
+	simpleBar.getScrollElement().scrollLeft = activeOffset.x + ( activeOffset.width / 2 ) + menu.scrollLeft - ( menuOffset.width / 2 );
 };
 
 export default horizontalMenu;

resources/assets/js/app/horizontal-menu.js

@@ -8,4 +8,4 @@ import domReady from '@wordpress/dom-ready';
  */
 import horizontalMenu from './../app/horizontal-menu.js';
 
-domReady( horizontalMenu( '.woocommerce-MyAccount-navigation ul', '.is-active' ) );
+domReady( horizontalMenu( '.woocommerce-MyAccount-navigation', '.is-active' ) );

resources/assets/js/woocommerce/account-menu.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Internal dependencies.
+ */
+import horizontalMenu from './../app/horizontal-menu.js';
+
+domReady( horizontalMenu( '.woocommerce-product-categories-wrapper' ) );

resources/assets/js/woocommerce/category-menu.js

@@ -17,3 +17,4 @@ import './checkout.js';
 import './products.js';
 import './lazyload.js';
 import './account-menu.js';
+import './category-menu.js';

resources/assets/js/woocommerce/index.js

@@ -20,6 +20,9 @@
 @import "~bootstrap/scss/mixins/grid";
 @import "~bootstrap/scss/grid";
 
+// SimpleBar
+@import "~simplebar/src/simplebar.css";
+
 /**
  * Internal dependencies
  */

resources/assets/scss/_config.scss

@@ -1,11 +1,15 @@
-// [1] Give any potential scrollbar more room so it does not overlap.
+.woocommerce-product-categories-wrapper {
+	-webkit-overflow-scrolling: touch;
+	margin-bottom: $spacer;
+}
+
 .woocommerce-page ul.products-categories,
 .woocommerce ul.products-categories {
 	display: flex;
-	overflow-x: scroll;
-	-webkit-overflow-scrolling: touch;
 	position: relative;
-	padding-bottom: $spacer; // [1]
+
+	@include reset-list();
+
 	padding-left: 2px;
 	padding-right: 2px;
 
@@ -17,10 +21,7 @@
 			border-radius: $border-radius;
 		}
 
-
 		@include gray("background", "200");
-		bottom: $spacer;
-		height: calc(100% - #{$spacer});
 	}
 
 	@include vertical-spacing("margin", "down", (

resources/assets/scss/modules/products-categories.scss

@@ -1,7 +1,8 @@
-// [1] Give any potential scrollbar more room so it does not overlap.
 .woocommerce-MyAccount-navigation {
 	margin: -($spacer) 0 $spacer;
+	padding: 0 0 $spacer;
 	position: relative;
+	-webkit-overflow-scrolling: touch;
 
 	&::after {
 		content: "";
@@ -21,11 +22,9 @@
 
 		@include reset-list();
 
-		padding: 0 0 $spacer; // [1]
+		margin: 0;
+		padding: 0;
 		display: flex;
-		overflow-x: scroll;
-		overflow-y: hidden;
-		-webkit-overflow-scrolling: touch;
 
 		li {
 			flex: 1 0 auto;