diff --git a/src/components/scrollable-canvas/scrollable-canvas.css b/src/components/scrollable-canvas/scrollable-canvas.css
index c3a3f312..c946a360 100644
--- a/src/components/scrollable-canvas/scrollable-canvas.css
+++ b/src/components/scrollable-canvas/scrollable-canvas.css
@@ -2,31 +2,39 @@ $scrollbar-size: 8px;
 $scrollbar-padding: 4px;
 
 .vertical-scrollbar, .horizontal-scrollbar {
-    position: absolute;
     background: rgba(190, 190, 190, 0.8);
     border-radius: calc($scrollbar-size / 2);
-    cursor: pointer;
+    width: 100%;
+    height: 100%;
 }
 .vertical-scrollbar-wrapper {
     position: absolute;
-    width: $scrollbar-size;
-    right: $scrollbar-padding;
+    width: calc($scrollbar-size + $scrollbar-padding);
+    right: 0;
     top: $scrollbar-padding;
     height: calc(100% - $scrollbar-size - 2 * $scrollbar-padding);
 }
 
 .horizontal-scrollbar-wrapper {
     position: absolute;
-    height: $scrollbar-size;
+    height: calc($scrollbar-size + $scrollbar-padding);
     left: $scrollbar-padding;
-    bottom: $scrollbar-padding;
+    bottom: 0;
     width: calc(100% - $scrollbar-size - 2 * $scrollbar-padding);
 }
 
-.vertical-scrollbar {
-    width: $scrollbar-size;
+.vertical-scrollbar-hitbox, .horizontal-scrollbar-hitbox {
+    position: absolute;
+    cursor: pointer;
+    box-sizing: border-box;
 }
 
-.horizontal-scrollbar {
-    height: $scrollbar-size;
+.vertical-scrollbar-hitbox {
+    width: calc($scrollbar-size + $scrollbar-padding);
+    padding-right: $scrollbar-padding;
+}
+
+.horizontal-scrollbar-hitbox {
+    height: calc($scrollbar-size + $scrollbar-padding);
+    padding-bottom: $scrollbar-padding;
 }
diff --git a/src/components/scrollable-canvas/scrollable-canvas.jsx b/src/components/scrollable-canvas/scrollable-canvas.jsx
index 56d6feda..236a5403 100644
--- a/src/components/scrollable-canvas/scrollable-canvas.jsx
+++ b/src/components/scrollable-canvas/scrollable-canvas.jsx
@@ -13,7 +13,7 @@ const ScrollableCanvasComponent = props => (
             style={{pointerEvents: 'none'}}
         >
             <div
-                className={styles.horizontalScrollbar}
+                className={styles.horizontalScrollbarHitbox}
                 style={{
                     width: `${props.horizontalScrollLengthPercent}%`,
                     left: `${props.horizontalScrollStartPercent}%`,
@@ -23,14 +23,18 @@ const ScrollableCanvasComponent = props => (
                 }}
                 onMouseDown={props.onHorizontalScrollbarMouseDown}
                 onTouchStart={props.onHorizontalScrollbarMouseDown}
-            />
+            >
+                <div
+                    className={styles.horizontalScrollbar}
+                />
+            </div>
         </div>
         <div
             className={styles.verticalScrollbarWrapper}
             style={{pointerEvents: 'none'}}
         >
             <div
-                className={styles.verticalScrollbar}
+                className={styles.verticalScrollbarHitbox}
                 style={{
                     height: `${props.verticalScrollLengthPercent}%`,
                     top: `${props.verticalScrollStartPercent}%`,
@@ -40,7 +44,11 @@ const ScrollableCanvasComponent = props => (
                 }}
                 onMouseDown={props.onVerticalScrollbarMouseDown}
                 onTouchStart={props.onVerticalScrollbarMouseDown}
-            />
+            >
+                <div
+                    className={styles.verticalScrollbar}
+                />
+            </div>
         </div>
     </div>
 );