ganderzz / React Scroll To
Licence: mit
Scroll to a position in React
Stars: ✭ 348
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to React Scroll To
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+689.08%)
Mutual labels: scrolling, smooth-scrolling
Mac Mouse Fix
Mac Mouse Fix - A simple way to make your mouse better.
Stars: ✭ 362 (+4.02%)
Mutual labels: scrolling, smooth-scrolling
Ngx Scroll To
Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.
Stars: ✭ 269 (-22.7%)
Mutual labels: scrolling, smooth-scrolling
Scroll Into View If Needed
Element.scrollIntoView ponyfills for things like "if-needed" and "smooth"
Stars: ✭ 811 (+133.05%)
Mutual labels: scrolling, smooth-scrolling
Scrollissimo
Javascript plugin for smooth scroll-controlled animations
Stars: ✭ 160 (-54.02%)
Mutual labels: scrolling, smooth-scrolling
Easy Scroll
A lightweight native javascript library to perform smooth scrolling with animation
Stars: ✭ 96 (-72.41%)
Mutual labels: scrolling, smooth-scrolling
Sweet Scroll
🍭 ECMAScript2015+ & TypeScript Friendly, dependency-free smooth scroll library.
Stars: ✭ 380 (+9.2%)
Mutual labels: scrolling, smooth-scrolling
Smoothscrollanimations
Demo of a tutorial on how to add smooth page scrolling with an inner image animation
Stars: ✭ 238 (-31.61%)
Mutual labels: scrolling, smooth-scrolling
really-smooth-scroll
A script that smoothen scrolling in the browser
Stars: ✭ 21 (-93.97%)
Mutual labels: scrolling, smooth-scrolling
overflow-color
Automatically switch CSS html background-color to bring a smooth user experience
Stars: ✭ 40 (-88.51%)
Mutual labels: scrolling
smoovy
A collection of small and useful js packages (smooth scrolling, utils, etc.) preventing copy & paste
Stars: ✭ 25 (-92.82%)
Mutual labels: smooth-scrolling
react-native-giphy
Integrate GIPHY into your React Native project (works with react-native-gifted-chat)
Stars: ✭ 25 (-92.82%)
Mutual labels: scrolling
Md parola
Library for modular scrolling LED matrix text displays
Stars: ✭ 282 (-18.97%)
Mutual labels: scrolling
Rssmonster
Google Reader inspired self-hosted RSS reader written in VueJS with an Express NodeJS backend. RSSMonster is compatible with the Fever API.
Stars: ✭ 321 (-7.76%)
Mutual labels: scrolling
scrollparent.js
A function to get the scrolling parent of an html element.
Stars: ✭ 51 (-85.34%)
Mutual labels: scrolling
Locomotive Scroll
🛤 Detection of elements in viewport & smooth scrolling with parallax.
Stars: ✭ 4,231 (+1115.8%)
Mutual labels: smooth-scrolling
Perspective
Powerful scrolling and motion parallax for iOS
Stars: ✭ 260 (-25.29%)
Mutual labels: scrolling
👟 React Scroll-To
A React component that makes scrolling easy.
React Scroll-To provides a Higher Order Component, and Render Props implementation.
Example: View React Storybook Examples
Install
npm: npm i react-scroll-to --save
yarn: yarn add react-scroll-to
API
Render Props:
// Scroll to position (20, 500) in the browser window
import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";
export default class MyComponent extends Component {
render() {
return (
<ScrollTo>
{({ scroll }) => (
<a onClick={() => scroll({ x: 20, y: 500 })}>Scroll to Bottom</a>
)}
</ScrollTo>
);
}
}
// Scroll to position (0, 500) within all provided <ScrollArea /> children
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";
export default class MyComponent extends Component {
render() {
return (
<ScrollTo>
{({ scroll }) => (
<ScrollArea style={{ height: 1000 }}>
<button onClick={() => scroll({ y: 500, smooth: true })}>
Scroll within this container
</button>
</ScrollArea>
)}
</ScrollTo>
);
}
}
// Scroll to position (0, 500) within a specific <ScrollArea /> child
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";
export default class MyComponent extends Component {
render() {
return (
<ScrollTo>
{({ scroll }) => (
<div>
<ScrollArea id="foo" style={{ height: 1000 }}>
<button onClick={() => scroll({ id: "foo", y: 500 })}>
Scroll within this container
</button>
</ScrollArea>
<ScrollArea style={{ height: 1000 }}>
This container won't scroll
</ScrollArea>
</div>
)}
</ScrollTo>
);
}
}
// Scroll by a component's ref
import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";
export default class MyComponent extends Component {
myRef = React.createRef();
render() {
return (
<>
<ScrollTo>
{({ scroll }) => (
<a onClick={() => scroll({ ref: this.myRef, x: 20, y: 500 })}>
Scroll to Bottom
</a>
)}
</ScrollTo>
<div ref={this.myRef}>My Element</div>
</>
);
}
}
Higher Order Component:
// Scroll to position (0, 500) within the browser window
import React from "react";
import { ScrollToHOC } from "react-scroll-to";
export default ScrollToHOC(function(props) {
return <a onClick={() => props.scroll({ y: 500 })}>Scroll to Bottom</a>;
});
// Scroll to position (0, 500) within all provided <ScrollArea /> children
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";
export default ScrollToHOC(function(props) {
return (
<ScrollArea style={{ height: 1000 }}>
<a onClick={() => props.scroll({ y: 500 })}>Scroll to Bottom</a>
</ScrollArea>
);
});
// Scroll to position (0, 500) within a specific <ScrollArea /> child
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";
export default ScrollToHOC(function(props) {
return (
<div>
<ScrollArea id="foo" style={{ height: 1000 }}>
<a onClick={() => props.scroll({ id: "foo", y: 500 })}>
Scroll to Bottom
</a>
</ScrollArea>
<ScrollArea style={{ height: 1000 }}>
This container won't scroll
</ScrollArea>
</div>
);
});
Types:
- Typescript definitions are built in
- Flow is currently not support (Open for PRs!)
2.0 Changes
- v2.0 has a new API for controlling scrolling. Instead of taking two arguments, x and y, the ScrollTo component now takes an object.
scrollTo({
x: 25 // The horizontal x position to scroll to
y: 10 // The vertical y position to scroll to
id: "myId" // The ID of the ScrollArea we want to scroll
ref: refObj // A reference to a component to scroll
smooth: true // If true, this will animate the scroll to be smooth. False will give an instant scroll. (defaults: false)
})
Mixing and matching these options give different results.
- The
scrollById
function has been deprecated in favor of theid
field inscrollTo
Smooth Scrolling Not Working?
Some browsers don't natively support smooth scroll. Checkout adding a polyfill like smoothscroll-polyfill
to fix the issue.
npm install smoothscroll-polyfill
Contributors
Thanks goes to these wonderful people (emoji key):
Dylan Paulus 💻 📖 |
Anthony Ng 💻 📖 |
UmenR 💻 |
Yi Wen 💻 |
Shitanshu Pandey 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].