diff --git a/css/80_app.css b/css/80_app.css
index 34ee819bc..41bb8bde6 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -2953,6 +2953,11 @@ img.tag-reference-wiki-image {
     flex-direction: column;
     padding: 5px 0;
     pointer-events: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+.map-controls::-webkit-scrollbar {
+    display: none;
 }
 .map-controls:before {
     content: '';
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 04e099e0a..5c3d626f6 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -201,6 +201,12 @@ export function uiInit(context) {
             .attr('class', 'map-control geolocate-control')
             .call(uiGeolocate(context));
 
+        controls.on('wheel.mapControls', function(d3_event) {
+            if (!d3_event.deltaX) {
+                controls.node().scrollTop += d3_event.deltaY;
+            }
+        });
+
         // Add panes
         // This should happen after map is initialized, as some require surface()
         var panes = overMap