Scroll Locking

Implement effective scroll locking to ensure users provide explicit privacy consent before accessing your site content.

Quick Start: Scroll locking is disabled by default. Enable it with lockScroll={true} when needed for stronger compliance.

What is Scroll Locking?

Scroll locking creates a barrier between users and your content by:

Preventing background scrolling of your website
Displaying an overlay behind privacy components like cookie banners
Blocking interaction with the underlying page
Requiring explicit consent before allowing site access

This approach is particularly important when legal requirements demand that users affirmatively opt in to data collection. It helps ensure that:

Consent is not presumed by default (addressing concerns raised by regulations such as the UK GDPR and CCPA/CPRA)
Users are presented with clear and unambiguous privacy notices, as required under Articles 13 and 14 of the UK GDPR

When to Use Scroll Locking

Consider implementing scroll locking when:

Legal Requirements

For jurisdictions with stricter privacy laws requiring explicit consent before tracking

Critical Notices

When users must not miss important privacy information

Sensitive Data

Sites handling especially sensitive personal data requiring informed consent

User Experience and Legal Tradeoffs

While scroll locking increases friction to ensure that consent is informed and explicit, this friction is a designed tradeoff in scenarios where legal obligations require demonstrable user consent.

Best Practices

Clear Messaging: Explain why access is blocked and what action is required
Simple Choices: Make consent options straightforward and obvious
Responsive Design: Ensure the banner works well on all device sizes
Visual Cues: Add subtle visual indicators that the site is locked
Accessibility: Test with screen readers to confirm proper announcements and ensure compliance with both privacy law requirements and accessibility standards

Be aware that overly aggressive scroll locking can lead to usability issues (such as higher bounce rates) even as it improves compliance. Thus, regular user testing—as well as legal reviews—is recommended to balance compliance with user experience.

Potential issues include:

Increased bounce rates
Frustrated users making hasty decisions
Accessibility issues if not implemented properly
Poor mobile experiences

Implementation

Basic Setup

To enable scroll locking (which is disabled by default), set the lockScroll prop to true on the CookieBanner component:

import { CookieBanner, ConsentManagerProvider } from "@c15t/react";
 
function App() {
  return (
    <ConsentManagerProvider>
      <YourApp />
      <CookieBanner 
        lockScroll={true} // Explicitly enabling scroll locking
        title="Privacy Notice"
        description="We need your consent before you can access our site."
      />
    </ConsentManagerProvider>
  );
}

By default, our components prioritize a balanced user experience with less friction, but enabling scroll locking gives you stronger compliance coverage when your use case requires it.

Comprehensive Styling

Once you've enabled scroll locking, you may want to customize its appearance to match your site's design.

For a complete guide on styling options and theming capabilities, including:

Using style objects and CSS variables
Working with component hierarchies
Type-safe styling
Responsive design patterns

See our Styling Guide for detailed information on how to fully customize the appearance of scroll-locked components while maintaining accessibility.

Examples

Here are some practical implementations of scroll locking for different scenarios:

Basic Implementation

import { CookieBanner } from "@c15t/react";
 
function App() {
  return (
    <ConsentManagerProvider>
      <YourApp />
      <CookieBanner 
        lockScroll={true}
        title="Privacy Notice"
        description="We use cookies to enhance your browsing experience. Please accept our cookie policy to continue."
      />
    </ConsentManagerProvider>
  );
}

<CookieBanner 
  lockScroll={true}
  title="Important Privacy Notice"
  description="European privacy regulations require your explicit consent before we can show you our content or set any cookies."
  rejectButtonText="Decline All"
  acceptButtonText="Accept All"
  customizeButtonText="Customize Settings"
/>

Technical Details

How Scroll Locking Works

When enabled, the scroll locking mechanism:

Adds overflow: hidden to the document body
Renders a full-viewport overlay with a high z-index
Positions the cookie banner above this overlay
Prevents events from reaching elements beneath the overlay
Restores normal scrolling once consent is provided

Keyboard Accessibility

In addition to locking scroll behavior, it's important to ensure keyboard users have a good experience.

Even with scroll locking, keyboard navigation should remain functional within the banner:

<CookieBanner
  lockScroll={true}
  trapFocus={true} // Ensures keyboard focus stays within the banner
/>

Legal Context and Rationale

Expand for Legal Information

Legal frameworks worldwide—including the EU's GDPR, the UK GDPR, and certain state-level U.S. privacy laws (e.g., California's CCPA/CPRA, Delaware's DPDPA, and the Maryland Online Data Privacy Act)—set out critical requirements regarding consent:

Regulations mandate that consent be an active, affirmative action (for example, pre-ticked boxes are prohibited)
Scroll locking directly supports these requirements by forcing users to interact with the privacy interface before site access is granted

Privacy notices must be clear, easily accessible, and separate from other terms and conditions
The modal experience created by scroll locking isolates the consent mechanism from other content, underscoring that users are making an informed and deliberate choice

Auditability and Record-Keeping

Jurisdictions expect controllers to keep evidence of consent (tracking who, when, and how consent was provided)
By ensuring that users must actively engage with a dedicated consent interface, scroll locking helps create a clear audit trail—a best practice highlighted in legal guidance documents

Jurisdiction-Specific Considerations

EU and UK requirements specify that consent must be granular, meaning different types of processing require separate permission
While some U.S. jurisdictions (e.g., California) may allow more flexibility, it is advisable to use a robust technique like scroll locking in environments where multiple legal regimes apply
Controllers should adapt their mechanisms (such as overlay styling, animation effects, and accessibility features) based on the legal expectations of the primary user base

Compliance Considerations by Region

Different regions have varying requirements for obtaining consent:

Region	Regulation	Recommendation
EU	GDPR (Articles 13, 14; explicit consent required)	Use scroll locking with clear opt-in and granular options
California	CCPA/CPRA	Assess whether explicit consent via scroll locking is needed; modifications may be required
UK	UK GDPR	Follow a similar approach as the EU, ensuring detailed privacy notices
Global	Varies	Adopt an adaptive approach based on the user's location and relevant regulations

Conclusion and Legal Best Practices

Scroll locking provides a robust mechanism for ensuring that users have engaged with privacy notices and provided explicit consent before interacting with site content. Legally, this technique supports the principles inherent within data protection regimes:

Explicit, informed consent
Separation and clarity of consent requests
Auditability and clear records of consent

By integrating scroll locking in a compliant manner, organizations can better protect sensitive data, adhere to legal obligations, and build user trust. Always consult the latest legal guidance and consider jurisdiction-specific adjustments when designing and implementing consent mechanisms.

For integration with other components, see the Cookie Banner and Consent Manager Dialog documentation.