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.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.