diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
index baaac7a8b..bcc0aef32 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
@@ -100,7 +100,22 @@ RED.tabs = (function() {
         if (options.scrollable) {
             wrapper.addClass("red-ui-tabs-scrollable");
             scrollContainer.addClass("red-ui-tabs-scroll-container");
-            scrollContainer.on("scroll",updateScroll);
+            scrollContainer.on("scroll",function(evt) {
+                // Generated by trackpads - not mousewheel
+                updateScroll(evt);
+            });
+            scrollContainer.on("wheel", function(evt) {
+                if (evt.originalEvent.deltaX === 0) {
+                    // Prevent the scroll event from firing
+                    evt.preventDefault();
+
+                    // Assume this is wheel event which might not trigger
+                    // the scroll event, so do things manually
+                    var sl = scrollContainer.scrollLeft();
+                    sl -= evt.originalEvent.deltaY;
+                    scrollContainer.scrollLeft(sl);
+                }
+            })
             scrollLeft = $('<div class="red-ui-tab-button red-ui-tab-scroll red-ui-tab-scroll-left"><a href="#" style="display:none;"><i class="fa fa-caret-left"></i></a></div>').appendTo(wrapper).find("a");
             scrollLeft.on('mousedown',function(evt) { scrollEventHandler(evt,'-=150') }).on('click',function(evt){ evt.preventDefault();});
             scrollRight = $('<div class="red-ui-tab-button red-ui-tab-scroll red-ui-tab-scroll-right"><a href="#" style="display:none;"><i class="fa fa-caret-right"></i></a></div>').appendTo(wrapper).find("a");