☰

Smooth Scroll Function

Winceptor created this userscript, which uses JavaScript to enable smooth page scrolling. I just made it better.

当前为 2024-07-23 提交的版本，查看 最新版本。

作者
DXRK1E
评分
0 0 0
版本
1.3
创建于
2024-07-23
更新于
2024-07-23
大小
9.2 KB
许可证
MIT
适用于
所有网站

Smoothscroll Script

This script enhances the scrolling experience on web pages by implementing smooth scrolling. It calculates and animates scroll positions frame-by-frame, making the scrolling look natural and controlled.

Features

  1. Smooth Scrolling: Adjusts the scroll position in a smooth and controlled manner.
  2. Acceleration: Provides an accelerating scroll effect for a more dynamic feel.
  3. Customizable Settings: Allows adjustment of smoothness and acceleration.
  4. Event Handling: Listens for mouse wheel and click events to control scrolling.

Settings

You can customize the behavior of the smooth scrolling by modifying the settings in the script:

  • Smoothscroll.Smoothness: Controls how smooth the scrolling effect is. Increase for smoother scrolling.
  • Smoothscroll.Acceleration: Determines the rate of acceleration for the scrolling. Adjust for faster or slower acceleration.
  • Smoothscroll.Debug: A debug level setting (currently unused).

How It Works

  1. Scroll and Animation Functions:

    • ScrollSubpixels(element, newvalue): Manages subpixel scrolling values.
    • ScrollPixels(element, newvalue): Manages pixel-level scrolling values and resets subpixels.
    • AnimateScroll(target, refreshrate): The core function that animates the scrolling effect, adjusting scroll positions based on the smoothness setting and current scroll deltas.
    • RequestAnimationUpdate(cb): Uses requestAnimationFrame to schedule the next frame of the animation, ensuring smooth updates based on the frame time.

  2. Control Functions:

    • Smoothscroll.Stop(target): Stops the scrolling animation for a given target element.
    • Smoothscroll.Start(target, scrollamount): Starts the scrolling animation for a given target element and scroll amount.

  3. Utility Functions:

    • CanScroll(element, dir): Checks if an element can scroll in a given direction.
    • HasScrollbar(element): Checks if an element has a visible scrollbar.
    • Scrollable(element, dir): Combines the above checks to determine if an element is scrollable in a given direction.
    • GetPath(e): Retrieves the event path (compatibility for different browsers).
    • GetTarget(e): Determines the target element for the scroll event.
    • GetStyleProperty(el, styleprop): Retrieves a style property value of an element.

  4. Event Handlers:

    • StopScroll(e): Stops scrolling on all elements in the event path.
    • StartScroll(e, target): Initiates the scroll animation based on the wheel event’s delta values and the target element’s properties.
    • WheelEvent(e): Handles mouse wheel events, starting the scroll animation if a valid target is found.
    • ClickEvent(e): Stops scrolling on click events.

  5. Initialization:

    • Init(): Initializes the smooth scrolling functionality, attaching the wheel and mouse down event listeners to the document. Ensures only one instance of the smooth scrolling functionality is active.

How to Use

  1. Install the Script: Add the script to your web page. You can do this by including it directly in your HTML file or by linking to an external JavaScript file.

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址