Skip to content

Feature(Scroll): Add throttling to scroll event handler#10

Merged
EbParsa merged 1 commit into
mainfrom
mkh-user/feature/6-scroll-throttle
Jun 14, 2026
Merged

Feature(Scroll): Add throttling to scroll event handler#10
EbParsa merged 1 commit into
mainfrom
mkh-user/feature/6-scroll-throttle

Conversation

@mkh-user

Copy link
Copy Markdown
Collaborator

Summary

Adds configurable throttling to scroll event handlers to reduce CPU usage during rapid scrolling, improving overall performance and responsiveness.

Changes

New Configuration Option

{
  scrollThrottle: 100,  // ms between scroll events (default: 100)
  mouseThrottle: 100,   // unchanged, for mousemove/touchmove
}

Before vs After

// Before: fires on EVERY scroll event (60-120 events/sec)
handlers.scroll = () => {
  record('scroll', { scrollY, percentY });
};

// After: throttled to once per scrollThrottle ms (~10 events/sec)
let lastScroll = 0;
handlers.scroll = () => {
  const now = Date.now();
  if (now - lastScroll < cfg.scrollThrottle) return;
  lastScroll = now;
  record('scroll', { scrollY, percentY });
};

Why 100ms?

  • Matches existing mouseThrottle behavior (consistency)
  • Reduces events from ~100/sec → ~10/sec (90% reduction)
  • Still captures meaningful scroll depth changes
  • Smooth UX without perceptible lag

Performance Impact

Positive.

API Changes

New config option in TeleConfig (tele.d.ts)

export interface TeleConfig {
  // ... existing options
  /** Minimum ms between scroll samples (default: 100) */
  scrollThrottle?: number;
}

Defaults update

const DEFAULTS = {
  // ... existing defaults
  mouseThrottle: 100,
  scrollThrottle: 100,  // NEW
};

Usage Example

// Use default 100ms throttle
const tele = window.tele;

// Or customize for your use case
const tele = createTele({
  scrollThrottle: 200,  // Less frequent, better for simple pages
  // scrollThrottle: 50,  // More frequent, better for precise tracking
});

Breaking Changes

None — feature is opt-in via configuration, default behavior remains consistent (now throttled for better performance).

Testing

  • Manual: Scrolling a long list shows reduced event frequency
  • Verified scroll percentage calculations remain accurate
  • capture.scroll = false still disables scroll tracking
  • Existing tests pass (no regressions)

Related Issues

Closes #[issue-number]

Checklist

  • Added scrollThrottle to DEFAULTS
  • Updated scroll handler with throttle logic
  • Updated TypeScript definitions
  • Documentation updated (if applicable)
  • Backward compatible

@mkh-user mkh-user requested a review from EbParsa June 14, 2026 11:39
@mkh-user mkh-user added enhancement New feature or request touch support Issues or enhancements for touch-based devices reliability Improves stability, error handling, or robustness labels Jun 14, 2026
@EbParsa EbParsa merged commit ecf8ee4 into main Jun 14, 2026
5 checks passed
@mkh-user mkh-user mentioned this pull request Jun 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request reliability Improves stability, error handling, or robustness touch support Issues or enhancements for touch-based devices

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants