Desktop Content Viewer with Mouse Wheel Support

Overview

Build a desktop-friendly scrollable content viewer that provides smooth mouse wheel scrolling with customizable sensitivity and visual feedback. The viewer should display a list of content items and allow users to scroll through them using their mouse wheel with enhanced control options.

Requirements

Core Functionality

1. Scrollable Content Container

   • Create a scrollable container that displays a vertical list of content items
   • The container should have fixed dimensions (600px width, 400px height)
   • Content should extend beyond the visible area to enable scrolling

2. Mouse Wheel Scrolling

   • Enable smooth mouse wheel scrolling within the container
   • Configure the scroll speed to be faster than default (approximately 2-3x normal speed)
   • Apply smooth easing transitions during wheel scrolling

3. Scroll Speed Controls

   • Provide two buttons: "Increase Speed" and "Decrease Speed"
   • Speed should adjust between slow (1x), normal (2x), and fast (4x) settings
   • Display the current speed setting to the user

4. Scroll Direction Toggle

   • Provide a checkbox or button to invert the scroll direction
   • When inverted, scrolling down should move content up and vice versa

5. Scroll Event Monitoring

   • Display a status indicator showing when mouse wheel scrolling is active
   • Show indicators for:
     • When wheel scrolling starts
     • When wheel scrolling is in progress
     • When wheel scrolling ends

Implementation Details

HTML Structure

Create an HTML file with:

• A wrapper container with class "scroll-wrapper"
• A content container with class "scroll-content" containing at least 20 content items
• Control buttons for speed adjustment
• A direction toggle control
• Status indicators for scroll events

Styling

• The wrapper should have overflow: hidden and fixed dimensions
• Content items should be clearly distinguishable (e.g., numbered boxes with padding and borders)
• Status indicators should be visible and update in real-time

Dependencies { .dependencies }

@better-scroll/core { .dependency }

Provides the core scrolling functionality.

@better-scroll/mouse-wheel { .dependency }

Provides desktop mouse wheel scrolling support with configurable options.

Test Cases

Test 1: Basic Mouse Wheel Scrolling @test

File: index.test.ts

Description: Verify that mouse wheel scrolling is enabled and functional

Test Steps:

1. Initialize the scroll container with mouse wheel support
2. Verify that the mouse wheel plugin is loaded
3. Simulate a mouse wheel event
4. Check that the scroll position changes

Expected Result: The container should scroll in response to mouse wheel events

Test 2: Speed Configuration @test

File: index.test.ts

Description: Verify that scroll speed can be adjusted dynamically

Test Steps:

1. Initialize with default speed setting
2. Change speed to fast (4x)
3. Trigger mouse wheel scrolling
4. Verify the scroll distance increases appropriately

Expected Result: Higher speed settings should result in greater scroll distance per wheel event

Test 3: Direction Inversion @test

File: index.test.ts

Description: Verify that scroll direction can be inverted

Test Steps:

1. Initialize with inverted direction enabled
2. Simulate a downward wheel scroll
3. Check that content scrolls in the opposite direction (upward)

Expected Result: With inversion enabled, scroll direction should be reversed

Test 4: Scroll Event Listeners @test

File: index.test.ts

Description: Verify that mouse wheel scroll events are fired correctly

Test Steps:

1. Register listeners for wheel scroll start, move, and end events
2. Simulate mouse wheel activity
3. Verify all three events fire in sequence

Expected Result: Start, move, and end events should fire in the correct order during wheel scrolling

Deliverables

• index.html - Main HTML structure
• styles.css - Styling for the content viewer
• index.ts - TypeScript implementation with mouse wheel configuration
• index.test.ts - Test suite covering the required test cases