tatva-scroll
Advanced tools
TatvaScroll is a lightweight, customizable smooth scrolling library that enhances the native scrolling experience across web applications. Designed to integrate seamlessly without affecting any existing layouts, styles, or JavaScript logic, TatvaScroll en
TatvaScroll is a lightweight, customizable smooth scrolling library that enhances the native scrolling experience across web applications. Designed to integrate seamlessly without affecting any existing layouts, styles, or JavaScript logic, TatvaScroll ensures a smooth scrolling experience while maintaining compatibility with custom elements, sticky headers, and scroll-triggered events.
npm install tatva-scroll
bun add tatva-scroll
yarn add tatva-scroll
<script type="module">
import TatvaScroll from "https://unpkg.com/tatva-scroll/dist/tatvaScroll.mjs";
</script>
// Basic initialization
import TatvaScroll from 'tatva-scroll';
const tatvaScroll = new TatvaScroll({
lerp: 0.1, // Smoothness of scroll (0-1)
multiplier: 1, // Scroll speed multiplier
smoothWheel: true, // Enable smooth wheel scrolling
smoothTouch: true, // Enable smooth touch scrolling
});
// Optional: Destroy instance if needed
tatvaScroll.destroy();
import React, { useEffect } from 'react';
import TatvaScroll from 'tatva-scroll';
function App() {
useEffect(() => {
const tatvaScroll = new TatvaScroll({
lerp: 0.1,
multiplier: 1,
smoothWheel: true,
smoothTouch: true,
});
// Optional: Clean up on component unmount
return () => {
tatvaScroll.destroy();
};
}, []);
return (
<div id="scroll-container">
{/* Your scrollable content */}
<div style={{ height: '200vh' }}>Scroll through this content</div>
</div>
);
}
export default App;
<template>
<div id="scroll-container">
<!-- Your scrollable content -->
<div style="height: 200vh">Scroll through this content</div>
</div>
</template>
<script>
import { onMounted, onUnmounted } from 'vue';
import TatvaScroll from 'tatva-scroll';
export default {
setup() {
let tatvaScroll;
onMounted(() => {
tatvaScroll = new TatvaScroll({
lerp: 0.1,
multiplier: 1,
smoothWheel: true,
smoothTouch: true,
});
});
onUnmounted(() => {
tatvaScroll.destroy();
});
},
};
</script>
<!DOCTYPE html>
<html>
<head>
<title>TatvaScroll Example</title>
<style>
#scroll-container {
height: 200vh;
}
</style>
</head>
<body>
<div id="scroll-container">
<!-- Your scrollable content -->
Scroll through this content
</div>
<script type="module">
import TatvaScroll from "https://unpkg.com/tatva-scroll/dist/tatvaScroll.mjs";
const tatvaScroll = new TatvaScroll({
lerp: 0.1,
multiplier: 1,
smoothWheel: true,
smoothTouch: true,
});
</script>
</body>
</html>
| Option | Type | Default | Description |
|---|---|---|---|
lerp | Number | 0.1 | Smoothness of scroll (0-1). Lower values result in smoother scrolling. |
multiplier | Number | 1 | Scroll speed multiplier. Less than 1 slows down scrolling. |
smoothWheel | Boolean | true | Enable smooth mouse wheel scrolling. |
smoothTouch | Boolean | true | Enable smooth touch/trackpad scrolling. |
scrollbarWidth | String | '10px' | Width of the custom scrollbar. |
scrollbarColor | String | 'rgba(0, 0, 0, 0.5)' | Color of the custom scrollbar. |
destroy(): Removes all event listeners and resets scroll behavior.scrollTo(target, options): Scroll to a specific position or element.
const tatvaScroll = new TatvaScroll();
// Scroll to an element with an ID
tatvaScroll.scrollTo('#target-element');
// Scroll to a specific Y position
tatvaScroll.scrollTo(500);
TatvaTech - Smooth Scrolling Simplified
FAQs
TatvaScroll is a lightweight, customizable smooth scrolling library that enhances the native scrolling experience across web applications. Designed to integrate seamlessly without affecting any existing layouts, styles, or JavaScript logic, TatvaScroll en
We found that tatva-scroll demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
Security News
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.