flyingant / react-scroll-to-component Goto Github PK
View Code? Open in Web Editor NEWsmooth scrolling to react component via reference.
Home Page: https://flyingant.github.io/react-scroll-to-component/
smooth scrolling to react component via reference.
Home Page: https://flyingant.github.io/react-scroll-to-component/
The offset value does not seem to do anything. The scroll works fine but it always scrolls exactly to the top of the component. I have tried many different values for offset including negative values.
`scroll = () => {
scrollToComponent(this.productInfo, {
offset: 400,
align: 'top',
duration: 1000
});
};
render () {
return (
<div>
<Nav/>
<MastHead clickHandler={this.scroll}/>
<ProductInfo inputRef={node => this.productInfo = node}/>
</div>
);
}`
Warning: {COMPONENT} is accessing findDOMNode inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.
I could be doing it wrong, my ref looks like this:
<tr ref={row => { this.row = row; }} >
between (scrollPosition + offset + window.pageYOffset) and (documentHeight - clientHeight).
this will cause the offset as we pass to the plugin would be unuse if the min heght has return
I believe the new update of react scripts may have broken this package
My code
<Button
onClick={() => scrollToComponent(this.Description, {offset: 0, align: 'top',duration: 1200})}>
</Button>
...
<section className='description' ref={(section) => { this.Description = section; }}>
<Description />
</section>
Yields TypeError: Cannot set property 'Description' of undefined on start
. Worked fine before updating to the latest version of react-scripts
I need to scroll to the component after it gets rendered to the page. The component itself is not shown bu default (the component will be rendered when example_shown
is true
). Something like this:
{props.example_shown && ( <ExtraComponent /> )}
and inside the ExtraComponent
, I give ref={(section) => { this.ExtraComponent = section }}
.
I tried to call scrollToComponent
inside componentDidMount()
but this.ExtraComponent
returns to null
. How can I scroll to position
Using meteor 1.8, not doing server side rendering.
First on meteor startup after installing this module I have the following warning :
Unable to resolve some modules:
"tween" in project/node_modules/scroll-to/index.js (web.browser.legacy)
If you notice problems related to these missing modules, consider running:
meteor npm install --save tween
I also tried to install npm install component/tween
but issue remained.
Then when trying scrollToComponent(someRef)
I got the error Tween is not a function
.
I tried to require it in componentDidMount and also tried react-scroll-to-component-ssr (see issue #8)
but same error.
Example focus on input after scrolling
this is not working on IE and edge Browser can anyone help me?
I mean, the element (ref) what kind of element needs to be?
How to use it inside a React Component to scroll to some points of the page?
The offset value does not seem to do anything. The scroll works fine but it always scrolls exactly to the top of the component. I have tried many different values for offset including negative values.
`scroll = () => {
scrollToComponent(this.productInfo, {
offset: 400,
align: 'top',
duration: 1000
});
};
render () {
return (
<div>
<Nav/>
<MastHead clickHandler={this.scroll}/>
<ProductInfo inputRef={node => this.productInfo = node}/>
</div>
);
}`
I get the below error in IE
TypeError: Invalid calling object at animate (eval code:46:5) at scrollTo (eval code:50:3) at module.exports (eval code:31:3) at Anonymous function (eval code:136:11) at callCallback (eval code:16433:152) at commitUpdateEffects (eval code:16472:29) at commitUpdateQueue (eval code:16460:19) at commitLifeCycles (eval code:17365:3) at commitAllLifeCycles (eval code:18736:44) at callCallback (eval code:150:1)
"dependencies": {
"gatsby": "^2.0.0",
"react-scroll-to-component-ssr": "^1.0.0",
...
}
Tried with the ssr version and the original one. Works with gatsby develop
but not when built and served. Is there a plugin I need or have I missed something?
as title
since my use case will be scrolling slowing to the component,
but I have to allow user to stop scrolling
Hi,
I have a parent and a child component. I want to have a button in the child component which onclick calls a function in the parent component. Inside this function I have the scrollToComponent method.
Inside the render method in the parent class I have this
<Home scroll={this.scrollToBooking} />
and in my child I have this
<button className="book-button" onClick={() => props.scroll()}>ORDER NOW</button>
The scroll()
method does get executed but the scrolling is not working, anybody know why or is it another way to do this?
scrollToBooking looks like this:
scrollToBooking() { scrollToComponent(this.Booking, { offset: 0, align: 'top', duration: 1000}); }
What license does this fall under? Can I use it in a commercial application?
I am having an issue when testing in low speed 3G.
If there are components still loading and the scrolls-to-component function is triggered it scrolls to the component as expected but strangely immediately after the delay period it scrolls back to the previous place.
Once everything is loaded, the scroll-to component then works fine
Anyone experiencing this and know a work around? Much appreciated.
Please allow easing functions. For instance I use this set:
function B1(t) { return t*t*t }
function B2(t) { return 3*t*t*(1-t) }
function B3(t) { return 3*t*(1-t)*(1-t) }
function B4(t) { return (1-t)*(1-t)*(1-t) }
export function getBezier(percent,x2,y2,x3,y3) {
var pos = {x:0, y:0};
pos.x = 0*B1(percent) + x2*B2(percent) + x3*B3(percent) + 1*B4(percent);
pos.y = 0*B1(percent) + y2*B2(percent) + y3*B3(percent) + 1*B4(percent);
return pos;
}
Then I calculate timing and values. I actually had my own scroll function, but came to yours and loved it. Just missing these easing functions.
This was my scroll to function:
export const scrollIntoView = async function(domel, {duration=500, align='top', behavior='smooth', needed=0.5, smooth='ease'}={}) {
// domel can be element or string, if string starts with space, dot, hash then it users querySelector
// only does Y right now
// duration - ms
// align - top, none
// bheavior - smooth, instant
// needed - is the if needed part. portion of the domel that should be visible. with respect to align. its a decimal percent. so align=top and portion=0.5 means top 50% shoudl be visible at least. if it is not then scrolling is done
// smooth - css smoothing - accepts: ease, linear, ease-in, ease-out, ease-in-out, or array of 4 numbers
if (!domel) throw new Error('scrollIntoView: domel does not exist');
if (typeof(domel) == 'string') {
let selector = domel;
let method = [' ', '.', '#'].includes(domel[0]) ? 'querySelector' : 'getElementById';
domel = await retry(async () => {
let domel = document[method](selector);
if (!domel) throw new Error('retry');
return domel;
}, { interval:50, sec:1 });
}
if (!Array.isArray(smooth)) {
let special_smooth = {
ease: [.25,.1,.25,1],
linear: [0,0,1,1],
'ease-in': [.42,0,1,1],
'ease-out': [0,0,.58,1],
'ease-in-out': [.42,0,.58,1]
};
smooth = special_smooth[smooth];
}
let scroll = getScroll();
let domel_ytop = parseInt(getElementScrollPosition(domel).y);
if (align === 'top') {
if (behavior === 'smooth') {
let end = domel_ytop;
let start = scroll.y;
let steps = [];
let lasttime = -10000000;
const MIN_TIME_GAP = 10; // ms
for (let i=0; i<101; i++) {
let scale = getBezier((100-i)/100, ...smooth);
let cur_val = Math.round((scale.y * (end - start)) + start);
if (!steps.length || steps[steps.length-1].val !== cur_val) {
let cur_time = Math.round(scale.x * duration);
if (cur_time - lasttime >= MIN_TIME_GAP) {
lasttime = cur_time;
steps.push({time:cur_time,val:cur_val});
}
}
}
// console.log('steps:', steps);
// let timeouts = [];
steps.forEach(step => {
// timeouts.push( setTimeout(()=>window.scrollTo(scroll.x, step.val), step.time) );
setTimeout(()=>window.scrollTo(scroll.x, step.val), step.time);
});
} else {
// behavior == 'instant'
window.scrollTo(scroll.x, domel_ytop);
}
}
}
Other features in my function that might be cool here are:
ref
. if ref is null then wait till it becomes non-null.There seems to be a slight jump 'up' the page before the transition begins. This happens across easing methods and with or without offset. Operating on Chrome Version 69.0.3497.100 on macOS
I'd like to scroll only if the target component is not already visible.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.