viewport

A lightweight JavaScript library for smooth scrolling and viewport operations in the browser.

Installation

npm install @muvon/viewport

Usage

Import the functions you need from the library:

import { scrollTo, scrollTop, isIn, width, height } from '@muvon/viewport';

Smooth Scrolling

Scroll to a specific element:

const element = document.querySelector('#some-element-id');
scrollTo(element);

Scroll to a specific offset from the top:

scrollTop(500, 1000); // Scroll to 500px from top over 1000ms

Viewport Detection

Check if an element is visible in the current viewport:

const element = document.querySelector('#some-element-id');
if (isIn(element)) {
  console.log('Element is in viewport');
}

Viewport Dimensions

Get the current viewport width and height:

const viewportWidth = width();
const viewportHeight = height();

API

scrollTo(element)

Smoothly scrolls to the specified element with a duration of 1000ms.

• element: DOM element to scroll to

scrollTop(to, duration)

Performs smooth scrolling to a specific offset from the top of the page.

• to: Number of pixels to scroll from the top
• duration: Duration of the scroll animation in milliseconds

isIn(element)

Checks if the specified element is visible in the current viewport.

• element: DOM element to check
• Returns: boolean

width()

Returns the current viewport width.

height()

Returns the current viewport height.

License

MIT License