tessl/npm-better-scroll--mouse-wheel

A TypeScript plugin for BetterScroll that provides enhanced mouse wheel scrolling capabilities with configurable speed, direction, easing, and boundary damping on PC platforms.

Overall
score

98%

Overview

Eval results

Files

Smooth Navigation Manager

Name: tessl/npm-better-scroll--mouse-wheel
Author: tessl

Build a smooth navigation manager for a single-page application that provides programmatic scrolling capabilities to navigate to different sections of a long-form content page.

Requirements

The navigation manager should:

Scroll to specific positions: Provide a method to scroll to an absolute position (x, y coordinates) with optional animation time and easing
Scroll by relative offsets: Provide a method to scroll by a relative amount (deltaX, deltaY) from the current position with optional animation
Scroll to specific elements: Provide a method to scroll to bring a specific DOM element into view, with optional offset adjustments

All scrolling should be smooth and animated using the better-scroll library's programmatic scroll control methods.

Test Cases

Scrolling to position (0, -500) with 800ms animation moves the content to that position @test
Scrolling by offset (0, -200) from current position (0, -300) results in final position (0, -500) @test
Scrolling to an element positions that element at the top of the viewport (or as close as boundary allows) @test

Implementation

@generates

API

/**
 * Creates a navigation manager for smooth scrolling
 * @param wrapperElement - The wrapper element for the scrollable area
 */
export function createNavigationManager(wrapperElement: HTMLElement): NavigationManager;

export interface NavigationManager {
  /**
   * Scrolls to an absolute position
   * @param x - Horizontal position
   * @param y - Vertical position
   * @param time - Animation duration in milliseconds (optional, defaults to 0)
   * @param easing - Easing function (optional)
   */
  scrollToPosition(x: number, y: number, time?: number, easing?: any): void;

  /**
   * Scrolls by a relative offset from current position
   * @param deltaX - Horizontal offset
   * @param deltaY - Vertical offset
   * @param time - Animation duration in milliseconds (optional, defaults to 0)
   * @param easing - Easing function (optional)
   */
  scrollByOffset(deltaX: number, deltaY: number, time?: number, easing?: any): void;

  /**
   * Scrolls to bring an element into view
   * @param element - The target element or selector
   * @param time - Animation duration in milliseconds (optional, defaults to 0)
   * @param offsetX - Horizontal offset adjustment (optional, defaults to 0)
   * @param offsetY - Vertical offset adjustment (optional, defaults to 0)
   * @param easing - Easing function (optional)
   */
  scrollToTarget(element: HTMLElement | string, time?: number, offsetX?: number, offsetY?: number, easing?: any): void;

  /**
   * Destroys the navigation manager and cleans up resources
   */
  destroy(): void;
}

Dependencies { .dependencies }

@better-scroll/core { .dependency }

Provides smooth scrolling capabilities with programmatic control methods including scrollTo, scrollBy, and scrollToElement.

@satisfied-by

Install with Tessl CLI

npx tessl i tessl/npm-better-scroll--mouse-wheel