diff --git a/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx
index 2e84567507633..52dab3cd7fc8f 100644
--- a/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx
+++ b/packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx
@@ -15,6 +15,14 @@ const StyledMenuList = styled(NotRendered<GridSlotProps['baseMenuList']>)(() =>
   minWidth: 248,
 }));
 
+function handleMenuScrollCapture(event: React.WheelEvent | React.TouchEvent) {
+  if (!event.currentTarget.contains(event.target as Node)) {
+    return;
+  }
+
+  event.stopPropagation();
+}
+
 const GridColumnMenuContainer = forwardRef<HTMLUListElement, GridColumnMenuContainerProps>(
   function GridColumnMenuContainer(props, ref) {
     const { hideMenu, colDef, id, labelledby, className, children, open, ...other } = props;
@@ -39,6 +47,8 @@ const GridColumnMenuContainer = forwardRef<HTMLUListElement, GridColumnMenuConta
         className={clsx(gridClasses.menuList, className)}
         aria-labelledby={labelledby}
         onKeyDown={handleListKeyDown}
+        onWheel={handleMenuScrollCapture}
+        onTouchMove={handleMenuScrollCapture}
         autoFocus={open}
         {...other}
         ref={ref}
diff --git a/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
index 04ccee431c332..8b51e4c290146 100644
--- a/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, screen, waitFor, within } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, waitFor, within } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { DataGrid } from '@mui/x-data-grid';
 import { getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn';
@@ -132,6 +132,43 @@ describe('<DataGrid /> - Column headers', () => {
         expect(screen.queryByRole('menu')).to.equal(null);
       });
     });
+
+    it('should prevent wheel scroll event from closing the menu when scrolling within the menu', async () => {
+      const { user } = render(
+        <div style={{ width: 300, height: 500 }}>
+          <DataGrid {...baselineProps} columns={[{ field: 'brand' }]} />
+        </div>,
+      );
+
+      await user.click(within(getColumnHeaderCell(0)).getByLabelText('brand column menu'));
+      const menu = screen.getByRole('menu');
+
+      fireEvent.wheel(menu);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('menu')).not.to.equal(null);
+      });
+    });
+
+    it('should close the column menu when the grid is scrolled', async () => {
+      const { user } = render(
+        <div style={{ height: 300, width: 300 }}>
+          <DataGrid
+            rows={Array.from({ length: 50 }, (_, id) => ({ id, name: id }))}
+            columns={[{ field: 'brand' }]}
+          />
+        </div>,
+      );
+
+      await user.click(within(getColumnHeaderCell(0)).getByLabelText('brand column menu'));
+
+      const scroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
+      fireEvent.wheel(scroller, { deltaY: 120 });
+
+      await waitFor(() => {
+        expect(screen.queryByRole('menu')).to.equal(null);
+      });
+    });
   });
 
   it("should use 'headerName' as the aria-label for the menu icon button", async () => {