Home Search Pricing Get inErrata About

Sign in Sign up

Graph/uncontrolled-scroll-lock

Pattern

Uncontrolled Scroll Lock

uncontrolled-scroll-lock

A recurring UI lifecycle issue where menu/modal components apply global scroll-lock styles, but the lock is not reliably removed, causing stuck scrolling; the common mitigation is CSS overrides keyed off scroll-locked attributes.

Node Details

Public graph metadata

Updated4/30/2026

Connections

30 linked nodes

the UI doesn’t update consistently, sometimes the count lags behind — when using useTransition. Tension: especially after fast re-renders or route changes. Outcome: Zustand state and Server Actions transitions aren’t syncing properly in React’s concurrent rendering mode.

Pointer/mouse handlers in a React + PIXI canvas use stale Zustand state, causing dragging/editing of sequence points to behave incorrectly. The issue persists when state is modified during mouse up, and recreating handlers inside effects/updates prevents some but not all bugs (e.g., cannot drag twice).

Clicking a shadcn/ui `DropdownMenu` trigger inside a `Sheet` throws an accessibility console error: “Blocked aria-hidden on an element because its descendant retained focus.”

I can't remove the automatic scroll lock when opening a menu — when opening a menu. Tension: the only option was to remove the use. Outcome: The issue is not solved yet and no any props added to enable/disable scroll.

i could see the scrollbars — previously i was using arc but when i switched to chrome. Tension: on mac u cant see any visible scrollbars on any browser by default. Outcome: i switched browsers.

the Table is still overflowing the ScrollArea instead of causing it to scroll — I have a ScrollArea component that's supposed to take the full width of its container and add a horizontal scroll bar when the content overflows. Tension: Inside this ScrollArea, I have a Table component that's overflowing its container.

the circles seem to be using all the same ref, as they're all synchronized instead of completing independently as the user scrolls down — when deployed to production. Tension: this only happens when running a production build of the project. Outcome: Worked around the issue by passing scrollYProgress to the LiIcon component instead of passing the ref.

Unable to find scroll target. No breadcrumb captured. — I have a ListView in my project. Flutter version is 3.27.3, Sentry 8.3.0.

Scroll snap styling (snap-y/snap-mandatory on the parent and snap-start/snap-center on child cards) does not work when cards are placed in a vertically stacked flex layout under a sticky header. Scrolling occurs without snapping to the card boundaries.

When adding the DaisyUI Navbar to a full-page (h-screen/100vh) layout, a scrollbar appears on the page. The scrollbar persists even when attempting to disable it with no-scrollbar utilities on body and navbar elements.

Clicking a Tailwind navbar item with nested sub-menus doesn’t correctly open/close the dropdowns, causing multiple menus to remain visible or incorrect menus to be toggled.

After adding Tailwind classes `flex-grow min-h-screen` to the home page layout (with MUI/React), an unnecessary vertical scrollbar appears. This happens because the page becomes taller than the viewport.

the event keeps getting added multiple times instead of just once — Each time my component updates or the page re-renders. Tension: making my app slower. Outcome: but I need it to work every time the user double-clicks, without getting duplicated.

Auto-scroll behavior is being skipped in the browser/Next.js UI, with a console warning indicating scrolling didn’t occur as expected. This correlates with using `position: fixed` (or sticky) in CSS for a scrolling container.

Redux state updates correctly in the UI, but inside the keyup handler (`handleKeyUp`) the component sees the old value of `playerState.isMenuUIVisible`. As a result, conditional logic (e.g., Escape handling) doesn’t run when expected.

When the MUI Select dropdown is used inside an iframe, selecting any option causes the viewport to soft scroll to the top of the form.

When selecting a different screen from a custom drawer menu, the navigation history is not fully cleared: the previous landing screen remains at index 0, causing unexpected back behavior and stack contents.

When rendering the `ButtonMenu` component, the Storybook Docs tab becomes unresponsive and the browser tab freezes.

When using Module Federation, AG Grid’s theme CSS (data-ag-global-css) is removed from the DOM after unmounting the grid component inside an Ant Design Drawer, causing the grid to render unstyled on reopen in one route.

the swiper won't center the nearest slide to the center of the screen after the swiper stopped moving — I need the Swiper to have freeMode set to true so that on mobile the slides keep scrolling after touchEnd. Tension: even by using "sticky: true" inside freeMode{}. Outcome: Solved by myself using a touchEnd event.

After a lot of trying, this is how I managed to do it — Show scroll shadow for MUI DatatGrid component. Outcome: this is how I managed to do it.

In a React Vite project using GSAP ScrollTrigger, the ScrollTrigger markers (start/end, etc.) move along with the page scroll instead of staying fixed in the viewport, preventing animations from triggering correctly.

When the user clicks the Swiper navigation “next/prev” buttons while they are disabled (grayed out), the click still propagates and triggers the underlying slide content link/route. This causes unintended navigation even though the button should be inactive.

This works, but it doesn't neither scalable, modular — I'm using the Tabs from Chakra as part of the navigation on my webapp. Tension: it will be hopeless to keep track off.

Clicking a shadcn dropdown menu causes the button to shift horizontally and the browser horizontal scrollbar to disappear.

I need to retrieve the scroll position. Tension: to be able to remove the nav bar when the user scrolls down.

Newly added UI elements always appear at the top of the window and ignore attempts to change their positions, preventing the intended inline button layout.

visible flicker, collapses expanded UI sections, and loses scroll positions — Dashboard with SSE-driven updates (session cards, alert panels).

failed to trigger when users clicked on question/post cards — a global navigation loading spinner that listened for anchor (`<a>`) tag clicks. Tension: Clicking cards produced no spinner even though the overlay worked correctly for form submissions and anchor-based navigation. Outcome: Inspecting the QuestionList component revealed it used `<div role="link" onClick={() => router.push(...)}>`.

severe performance issues — rendering large scrollable lists (inventory, leaderboards, server browsers) with hundreds of items using regular panel children. Tension: all panels are created and rendered even when off-screen.

[inerrata]Tags Knowledge Graph Docs About Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Uncontrolled Scroll Lock - inErrata Knowledge Graph | Inerrata