diff --git a/static/js/lightbox_canvas.js b/static/js/lightbox_canvas.js
index 4e5182aa97..e291c82d75 100644
--- a/static/js/lightbox_canvas.js
+++ b/static/js/lightbox_canvas.js
@@ -41,6 +41,14 @@ var LightboxCanvas = (function () {
         attachEvents: function (canvas, context, meta) {
             var mousedown = false;
 
+            // wheelEvent.deltaMode is a value that describes what the unit is
+            // for the `deltaX`, `deltaY`, and `deltaZ` properties.
+            const DELTA_MODE = {
+                PIXEL: 0,
+                LINE: 1,
+                PAGE: 2,
+            };
+
             // give object structure in `mousedown`, because its props are only
             // ever set once `mousedown` + `mousemove` is triggered.
             var lastPosition = {};
@@ -69,6 +77,16 @@ var LightboxCanvas = (function () {
                 // this is to reverese scrolling directions for the image.
                 var delta = meta.direction * e.deltaY;
 
+                if (e.deltaMode === DELTA_MODE.LINE) {
+                    // the vertical height in pixels of an approximate line.
+                    delta *= 15;
+                }
+
+                if (e.deltaMode === DELTA_MODE.PAGE) {
+                    // the vertical height in pixels of an approximate page.
+                    delta *= 300;
+                }
+
                 // this is calculated as the user defined speed times the normalizer
                 // (which just is what it takes to take the raw delta and transform
                 // it to a normal speed), multiply it against the current zoom.