diff --git a/web/fix touchpad pan and zoom.js b/web/fix touchpad pan and zoom.js
new file mode 100644
index 0000000..5c423a4
--- /dev/null
+++ b/web/fix touchpad pan and zoom.js	
@@ -0,0 +1,43 @@
+// @ts-check
+/** @type {any} */
+const { self } = window
+
+/** @type {import("../../../web/types/litegraph")} */
+const { LGraphCanvas } = self
+
+// @ts-ignore
+import * as ComfyUI_module from "../../../scripts/app.js"
+/** @type { import("../../../web/scripts/app.js") } */
+const { app } = ComfyUI_module
+
+//////////////////////////////
+
+/**
+ * Smooth scrolling for touchpad
+ */
+LGraphCanvas.prototype.processMouseWheel = function (/** @type {WheelEvent}*/ event) {
+  if (!this.graph || !this.allow_dragcanvas) return
+
+  const { clientX: x, clientY: y } = event
+  if (this.viewport) {
+    const [viewportX, viewportY, width, height] = this.viewport
+    const isInsideX = x >= viewportX && x < viewportX + width
+    const isInsideY = y >= viewportY && y < viewportY + height
+    if (!(isInsideX && isInsideY)) return
+  }
+
+  let scale = this.ds.scale
+  let { deltaX, deltaY } = event
+
+  if (event.metaKey || event.ctrlKey) {
+    let SCALE = event.ctrlKey ? 150 : 100
+    if (event.metaKey) SCALE *= -1 / 0.5
+    this.ds.changeScale(scale - deltaY / SCALE, [event.clientX, event.clientY])
+  } else {
+    this.ds.mouseDrag(-deltaX, -deltaY)
+  }
+  this.graph.change()
+
+  event.preventDefault()
+  return false // prevent default
+}