Convert Figma logo to code with AI

iamdustan logosmoothscroll

Scroll Behavior polyfill

3,848
344
3,848
54
View on GitHubView on NPM

Top Related Projects

cferdinandi's avatar

smooth-scroll

5,491

A lightweight script to animate scrolling to anchor links.

locomotivemtl's avatar

locomotive-scroll

7,772

🛤 Detection of elements in viewport & smooth scrolling with parallax.

Quick Overview

iamdustan/smoothscroll is a polyfill for smooth scrolling behavior in web browsers. It implements the window.scroll() and window.scrollTo() methods, as well as Element.scroll() and Element.scrollTo(), providing a consistent smooth scrolling experience across different browsers and devices.

Pros

  • Improves user experience by providing smooth scrolling animations
  • Cross-browser compatibility, including older browsers that don't natively support smooth scrolling
  • Lightweight and easy to implement
  • Follows the W3C CSSOM View Module specification

Cons

  • May introduce a slight performance overhead on older devices
  • Requires JavaScript to be enabled in the browser
  • Might conflict with other custom scrolling implementations
  • Not actively maintained (last update was in 2019)

Code Examples

  1. Smooth scroll to a specific position:
window.scroll({
  top: 1000,
  left: 0,
  behavior: 'smooth'
});
  1. Smooth scroll to an element:
document.querySelector('.target-element').scrollIntoView({
  behavior: 'smooth'
});
  1. Smooth scroll within a container element:
document.querySelector('.container').scroll({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

Getting Started

  1. Install the polyfill using npm:
npm install smoothscroll-polyfill
  1. Import and use the polyfill in your JavaScript file:
import smoothscroll from 'smoothscroll-polyfill';

// Kick off the polyfill
smoothscroll.polyfill();

// Now you can use smooth scrolling
window.scroll({ top: 1000, left: 0, behavior: 'smooth' });

Alternatively, you can include the polyfill directly in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>
<script>
  // Kick off the polyfill
  smoothscroll.polyfill();
</script>

Competitor Comparisons

cferdinandi logo

smooth-scroll

5,491

A lightweight script to animate scrolling to anchor links.

Pros of smooth-scroll

  • Smaller file size (2.4KB vs 11KB for smoothscroll)
  • More frequent updates and active maintenance
  • Includes additional features like custom easing patterns

Cons of smooth-scroll

  • Less browser compatibility compared to smoothscroll
  • Requires more setup and configuration
  • May have performance issues with large numbers of elements

Code Comparison

smooth-scroll:

var scroll = new SmoothScroll('a[href*="#"]', {
    speed: 500,
    easing: 'easeInOutCubic'
});

smoothscroll:

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();
window.scroll({ top: 1000, behavior: 'smooth' });

The code comparison shows that smooth-scroll requires more initial setup but offers more customization options, while smoothscroll provides a simpler implementation with native browser support.

Both libraries aim to provide smooth scrolling functionality, but they differ in their approach and feature set. smooth-scroll offers more control over the scrolling behavior, while smoothscroll focuses on providing a polyfill for browsers that don't support native smooth scrolling.

When choosing between the two, consider factors such as browser compatibility requirements, desired level of customization, and project-specific needs.

locomotivemtl logo

locomotive-scroll

7,772

🛤 Detection of elements in viewport & smooth scrolling with parallax.

Pros of Locomotive Scroll

  • More feature-rich, offering advanced parallax and scroll-based animations
  • Active development and maintenance, with regular updates and bug fixes
  • Extensive documentation and examples for easier implementation

Cons of Locomotive Scroll

  • Larger file size and potentially higher performance overhead
  • Steeper learning curve due to more complex API and configuration options
  • May require additional setup for certain features or compatibility

Code Comparison

Smoothscroll:

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();
window.scroll({ top: 1000, behavior: 'smooth' });

Locomotive Scroll:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1,
});

Summary

Smoothscroll is a lightweight polyfill for native smooth scrolling, ideal for simple projects or when browser compatibility is a primary concern. Locomotive Scroll, on the other hand, offers a more comprehensive solution with advanced features like parallax effects and custom easing, making it suitable for complex, visually rich websites. However, this comes at the cost of a larger file size and potentially more complex implementation.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Smooth Scroll behavior polyfill

The Scroll Behavior specification has been introduced as an extension of the Window interface to allow for the developer to opt in to native smooth scrolling. To date this has only been implemented in Chrome, Firefox and Opera.

Check out all the methods covered here: https://iamdustan.github.io/smoothscroll

Installation and use

Download the production ready file here and include it in your project, or install it as a package.

# npm
npm install smoothscroll-polyfill --save

# yarn
yarn add smoothscroll-polyfill

When including the polyfill in a script tag, it will run immediately after loaded.

If you are importing it as a dependency, make sure to call the polyfill method:

import smoothscroll from 'smoothscroll-polyfill';

// kick off the polyfill!
smoothscroll.polyfill();

In both cases, the script will detect if the spec is natively supported and take action only when necessary.

The code requires requestAnimationFrame polyfill for browsers which don't support it.

Force polyfill implementation

If you prefer to always override the native scrolling methods, place this global variable before requiring the module or including the polyfill file.

window.__forceSmoothScrollPolyfill__ = true;

We strongly recommend not to do this unless your project strongly needs it.

Contribute

The requirements to contribute are yarn and the latest LTS Node.js version.

First, fork the repository and do yarn install in the root folder to get all the dependencies to work with. Create a feature branch, write your stuff and run yarn test to check code style and prevent bugs.

In this project we use Prettier to format the final published code, you can run yarn format before committing. If you don't, a precommit hook will prevent you from pushing code that hasn't been formatted properly.

Are you done? Awesome, submit a pull request explaining your changes.

This is a polyfill, not library, so make sure the behavior you are introducing is in the spec.

On tests files we are using ES2015, but the polyfill is written in ES5 for browser compatibility.

Watch tests

If you want to watch tests as you write your code run yarn test --watch.

Browser Support

Successfully working in:

  • natively supported in Chrome
  • natively supported in Firefox
  • Safari 6+
  • Internet Explorer 9+
  • Microsoft Edge 12+
  • Opera Next

Standards documentation

NPM DownloadsLast 30 Days