Scroll Depth Indicator

The Scroll Depth Indicator module is designed to improve user engagement by providing a real-time visual progress indicator as users scroll through a webpage. This feature is particularly useful for content-heavy websites, ensuring users can track their reading progress effortlessly.

Key Benefits

• Enhanced User Experience: Gives users a clear understanding of their reading progress, reducing frustration and improving content engagement.
• Increased Accessibility: Helps users navigate lengthy pages more efficiently, especially on devices where scrolling behavior varies.
• Optimized for All Devices: Ensures smooth performance on desktops, tablets, and mobile devices, adapting to different screen sizes dynamically.

Features

1. Configurable Element Placement

• Allows site administrators to choose how the scroll depth indicator is attached to a webpage.
• Options include:
  • Element: Directly attach the indicator to a specific HTML element.
  • Class: Target elements using a CSS class.
  • ID: Attach to a unique ID in the DOM.
• Default option: Element

2. Custom Selector Definition

• Administrators can specify the exact selector (element, class, or ID) where the indicator should be placed.
• Default selector: Header, ensuring visibility without obstructing page content.

3. Content-Type Based Restriction

• Provides control over where the Scroll Depth Indicator should appear.
• Allows selection of specific content types (e.g., Articles, Blog Posts, News, etc.).
• Ensures unnecessary elements are not loaded on pages where they are not needed, improving performance and relevance.

4. Responsive and Device-Friendly Design

• Desktop: The scroll indicator remains visible at the top, ensuring users can track their progress while reading long-form content.
• Tablet: Adapts to touch-based scrolling, ensuring a smooth experience without disrupting navigation.
• Mobile: Optimized for smaller screens, ensuring the indicator does not interfere with important UI elements (e.g., navigation bars, sticky headers).

5. Lightweight and Performance-Optimized

• Minimal impact on page load times, as the module efficiently appends the indicator only when necessary.
• Uses Drupal config API to load configuration dynamically, ensuring minimal JavaScript execution overhead.

6. Seamless Integration with any Drupal Themes

• Works across all Drupal themes with CSS styling options.
• Developers can override styles to match brand identity.