Disable/ Suppress the scroll bar during runtime

[starsibi]

Feature Description

Disabling or suppressing the scrollbar during runtime in an Angular application involves dynamically controlling the scrollbar’s interaction based on certain conditions or user actions. This feature is useful when you want to temporarily prevent users from scrolling through content, perhaps during a loading state or when displaying a modal dialog.

Key Points: Dynamic Control: You can enable or disable the scrollbar interaction at any point during the application’s runtime. User Interaction: The feature typically involves toggling a boolean property that controls whether the scrollbar is active or suppressed. Implementation: This is achieved using the disableInteraction property of the ngx-scrollbar component, which can be bound to a variable in your component’s class. Use Cases: Common scenarios include preventing scrolling while data is being fetched, during animations, or when a modal or overlay is active.

[MurhafSousli]

There is disableInteraction option with the scrollbar controls, but it doesn't disable scrolling with controls outside the scrollbar such as the wheel, touchpad, touch gestures, because it is a native functionality. you can simply disable the scroll by toggling a class that sets overflow: hidden on the viewport