fisshy/react-scroll

React scroll component

react-scroll's Issues

Smooth Scrolling isn't working

Not sure whats up, probably something with my code.. when i click a Link element it just hops right to that element and doesnt do smooth scrolling...

anyone have any ideas?

ReactDOM Error

Hi, i've just encountered an error at this line :
scroller.register(this.props.name, ReactDOM.findDOMNode(this)); in Helpers.js

Uncaught TypeError: o.findDOMNode is not a function

I think it's because react-dom is not a dependency in the package.json of npm build. But even after adding the package, the error is persisting.

I have just placed a link and an element as in your exemple, and installed react-scroll and react-dom with npm. The "to" and "name" property of link and element are the same.

I'm sorry for my english errors.

Thanks

API to force a scroll?

Is there a way to force a scroll to top without clicking on ScrollToElement / Link? For example, if I'm on a page with params and navigating between them, currently it keeps me at the page position rather than scrolling me back to the top of the page. I'd like to manually do this if it's possible.

API to scroll to <Element>

Is there a way to programmatically scroll to a named Element?

Using with react-router

Is it possible to use react-scroll in conjunction with react-router?

Code duplication

Duplicated code was committed in 951f21b. You can see it here. This is a bug itself, but the worst thing is that it causes Safari 8 to throw js error.

Scroll if not visible

Hi I'm thinking it would be useful to have a flag to only scroll if the element you are scrolling to isn't visible.

Are you into the idea? If so I could make a pull request.

offsetParent check causing problems in container scrolling

https://github.com/fisshy/react-scroll/blob/master/modules/mixins/scroller.js#L65

Container with ID ' + containerId + ' is not a positioned element

So I'm running into an issue while trying to scroll a container (via containerId prop) to a specified Element. It's hitting the above linked error even thought the container specified is in fact a positioned element.

Here's what's happening:

I have a containerElement that I want to scroll which is a positioned element. I then have an Element nested fairly deep inside this container that I want to scroll to. When I try to scroll I hit the aforementioned error. This is happening because there is another positioned DOM element between the containerElement and the Element I am trying to scroll to. This causes the offsetParent of the target Element to be set to set to the intermediate element rather than the desired containerElement.

I understand why offsetParent is used here, but it prevents the use of other positioned elements between the desired container and the target element. If this is a limitation that can't be avoided then the error handling should probably be updated, because the error is misleading and incorrect.

@fisshy @poacher2k

Not activating link

In Helpers.js there's a code on line 75 which determines if link needs to be active. I added console log there like so

if(offsetY >= top && offsetY <= height && scroller.getActiveLink() != to) {
            console.log("yes", to)
            scroller.setActiveLink(to);

If I click a link and it scrolls to element top to bottom, then the value of "to" is wrong, but as I scroll just one pixel it is calling it again with correct "to" value. So my link doesn't get active class unless i scroll a little bit.

Surprisingly this is not the case when I am at the bottom of a page and scroll bottom to top by pressing on link

Scroll event callbacks and possibly expose scrollTop

Hopefully detect scroll animation complete, but start and interrupt would be helpful as well.

Cheers!

Dependencies not being installed via npm

I'm trying to integrate this package with npm, but your dependencies aren't being installed through npm install. I notice this based on the logs, but here's an example error I get from webpack.

ERROR in ./~/react-scroll/lib/mixins/animate-scroll.js
Module not found: Error: Cannot resolve module 'object-assign' in /js/directory/node_modules/react-scroll/lib/mixins
 @ ./~/react-scroll/lib/mixins/animate-scroll.js 3:13-37

I notice there are no dependencies in the package.json in the build/npm folder either.

server side rendering is failing

Isomorphic / universal React web-apps are becoming the standard
When I use react-scroll and render on the server it throws the following error:

ReferenceError: window is not defined
        at startAnimateTopScroll (...\node_modules\react-scroll\lib\mixins\animate-scroll.js:113:3)
        at Object.scrollToTop (...\node_modules\react-scroll\lib\mixins\animate-scroll.js:138:3)

I'd suggest to wrap all dependencies to window with

var canUseDOM = !!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
)
if(canUseDOM ){
     // use window dependency...
}else{
  //have an alternative that wouldn't break functionality...
}

Scroll to Element on Page Load

One thing I would like to do is be able to scroll to an Element on page load. For instance, I'm currently using react-router to change the url when a user clicks on a nav element. The user stays on the same page but the url changes. /mypage to /mypage/section1. That way the user can hand off that url to someone else and when the page loads it auto-scrolls to that section.

I think having some sort of service that tracks the registered elements would enable this scenario.

Some pseudo code.

class Page {
  componentDidMount() {
    let section = this.context.router.getParams();
    // scroll service knows about all elements on page
    myScrollService.scrollTo(section)
  }

  componentDidUnmount() {
    // let the service know to purge all its data
    myScrollService.unmount();
  }
}

webpack -wd in production

Hey

Any idea on why i am getting this in production env:

WARNING in scripts.min.js from UglifyJs
Condition always true [.//scrollreveal/dist/scrollreveal.js:3,0]
Dropping unreachable code [.//scrollreveal/dist/scrollreveal.js:5,3]

thanks,
Rares

Release process suggestions

The releases in this app aren't particularly easy to find. I think this is because of 2 reasons:

1. there aren't always dedicated release commits
2. the tags aren't always being maintained

I'm on an app that isn't upgraded to React 15 yet, so I was trying to find older releases. It'd be awesome if you started doing those 2 things – it'd make it way easier for consumers of this lib!

TypeError: Cannot read property 'getBoundingClientRect' of null

at var cords = element.getBoundingClientRect(); element returned from scroller.get(to); is null
(anonymous function) @ Helpers.js:108
scrollSpy.scrollHandler @ scroll-spy.js:20
Please note that spyed element could be absent from DOM

online demo please :)?

For react.rocks...when you're ready. thx!

Meteor has conflict with react-dom npm

Hello,

I ran into a problem trying to use react-scroll in Meteor. The problem is that the react-scroll uses a react-dom npm as dependency, which is not in "Meteor". As a result, when you try to connect react-scroll to a component, an error appears:

doesn't seem to be working with react 1.0.0

I'm using JSPM

import React from 'react';
import { Link as ScrollLink, Element } from 'react-scroll';

<ScrollLink to={this.props.target} smooth={true}>hi</ScrollLink>

<Element name="image"/>

when i run it says i have two version of React running
also the package requires react-dom!

Understand the spy attribute and get scroll top.

Would you be so kind to explain the spy attribute and also is there a way to get the scrollTop value?

Make possible to calculate elemBottomBound based on next <Element> elemTopBound

Hey, thanks for useful lib. I wondering if you can cover such use-case: presume that I have y-'gaps' between my <Element>s on the page. If I scroll over first <Element>, it makes corresponding active. However, if I'm currently 'between' <Element>s, meaning rectBound of neither first element's on z-axis nor second element's on z-axis is inside scrollTop coordinate, _neither first or second is active.

More 'real' use case: I have elements that are at the middle of page, but I want first to be active even when I'm on top of the page so user sees that she's looking at first element of my content. By layout/css consideration I can't wrap whole my page in .

Hope this explanation makes sense.

Thanks!

Anchor Links not working in IE9

Scroll doesn't work either but for this issue just looking to make the anchor links work.

Can be tested against the example you provide:
http://fisshy.github.io/react-scroll-example/basic/index.html

Divs with dynamic heights

Awesome library, using it on my personal portfolio website, www.kuiros.io. I have divs/sections that are dynamic in height so that they change height when I resize the window. This messes up the anchors where the links scroll to. Is there any way to refresh the anchor positions on a window resize? Thanks a lot.

scrollSpy performs unnecessary work

Seems like the mount method in scroll-spy.js is getting called every time a <Link .../> is mounted, resulting in multiple scroll listeners on document. Since scrollSpy is a global singleton which manages its own listeners, there should be a check which only adds the scroll listener if there is none already

I'll probably up a PR for this, unless I'm misreading the whole thing

scrollTo doesn't works passing a object as second parameter

scroller.scrollTo function doesn't works using an object as props:

    scroller.scrollTo(target, { offset: 100, smooth: true });

Looking around the compiled code I've checked the code, and the scrollTo method expect the these parameters: (to, animate, duration, offset). So, when I tried to use the exactly match it's works fine:

    scroller.scrollTo(hashTarget, true, false, -120);

I'm using the 1.0.4 library version and have no idea where I could find the releases documentation.

Feel free to close this issue if this doesn't makes any sense, otherwise I think is necessary to update the documentation.

Best regards!

Babel Error

Babel showing this error in /node_modules/react-scroll/lib/mixins/Helpers.js

Line 116: Unexpected token <
You may need an appropriate loader to handle this file type.
className = this.props.className
}
return <Component {...this.props} {...this.state} className={className} onClick={this.handleClick} />
}
});


Unknown props spy, smooth, duration on <a> tag

Hi, I get a warning when I update my react version to 15.2.0.

Warning: Unknown props `spy`, `smooth`, `duration` on <a> tag. Remove these props from the element

I use "Link", "Element" to scroll my screen.

Thank you.

Convert mixins to HOCs

As I'm sure you know, mixins are dead; long live HOCs. Any plans to refactor?

Cannot render on server-side

Im trying to render application on server-side with React.renderToString method
https://github.com/mhart/react-server-example
and have got an error:

e:\repos\wt-site\node_modules\react-scroll\lib\mixins\cancel-events.js:6
            document.addEventListener(events[i], cancelEvent);
            ^
ReferenceError: document is not defined
    at Object.module.exports.register (e:\repos\wt-site\node_modules\react-scroll\lib\mixins\cancel-events.js:6:4)
    at Object.<anonymous> (e:\repos\wt-site\node_modules\react-scroll\lib\mixins\animate-scroll.js:11:14)
    at Module._compile (module.js:456:26)
    at Object.require.extensions.(anonymous function) [as .js] (e:\repos\wt-site\node_modules\node-jsx\index.js:26:12)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (e:\repos\wt-site\node_modules\react-scroll\lib\mixins\Helpers.js:4:21)
    at Module._compile (module.js:456:26)

HTML attributes cause validation errors

When validating with https://validator.w3.org/ there's a couple of attributes causing errors, e.g. 'to', 'offset' and 'name'. Any particular reason for not using data attributes when rendering the markup? :)

Scrolling on demo doesn't appear to work on iPhone

Tested on a iPhone 6 plus with Chrome and Safari and an iPhone 5 with Chrome. Able to click on the "test 2" or "test 3" (etc) links but page doesn't scroll.

react-scroll on mobile device/emulator not working?

It is not scrolling to the element on mobile devices and emulators.

Images loading are causing scroll height to be off.

Is there a solve for this common issue?

Seems like by default the scroll height is calculated before all the images are loaded with is causing the scroll to be off, sometimes by alot.

Unknown prop `smooth`

There is something happening with the <Link /> tag for me. What is this causing? Without the smooth attribute, the scroll isn't happening .. well, smooth...

warning.js:44 Warning: Unknown prop `smooth` on <a> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Scroll to Element

Sorry for this question. Didn't see any other place to put this.
I'm trying the following but can not get a proper way to do it.

I have a large form with a lots of inputs. If the user clicks 'save' I want to be able to scroll to the first input that has the error. Tried to programmatically click the Link doesn't seem to work and I do not know the position of the input because the form is dynamic and can vary a lot from user to user.

Previous versions

Where are previous versions that work with react 0.14.8?

Easing support

Easing would be great to have as an option.

Scrollable within a div?

Is it possible to configure scroll in order to scroll through a selected element (such as a div with overflow:scroll styling) rather than the window? I'm trying to customize the components to do so, but I might be missing an obvious functionality. Thanks

Is there a reason why react-dom is used?

Line 107 of modules/mixins/Helpers.js is the only place ReactDOM is used, and from a very small test, it seems as though React.findDomNode works in place of ReactDOM.findDomNode. I am new to React, is there a reason why the react-dom package is used?

Changelog for ~1.0?

I'm currently using [email protected]; I'd like to know if I can safely upgrade to 1.0.x. Is is possible to write a quick changelog listing the breaking changes between 0.x and 1.x?

Thanks!

Seems working fine, but got warnings when scrolling

Anyone has encountered this before?

input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null.

warning @   warning.js:45
assertValidProps    @   ReactDOMComponent.js:200
ReactDOMComponent.Mixin.updateComponent @   ReactDOMComponent.js:698
ReactDOMComponent.Mixin.receiveComponent    @   ReactDOMComponent.js:645
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
ReactCompositeComponent_updateComponent @   ReactPerf.js:66
ReactCompositeComponentMixin.receiveComponent   @   ReactCompositeComponent.js:405
ReactReconciler.receiveComponent    @   ReactReconciler.js:87
ReactCompositeComponentMixin._updateRenderedComponent   @   ReactCompositeComponent.js:562
ReactCompositeComponentMixin._performComponentUpdate    @   ReactCompositeComponent.js:544
ReactCompositeComponentMixin.updateComponent    @   ReactCompositeComponent.js:473
ReactCompositeComponent_updateComponent @   ReactPerf.js:66
ReactCompositeComponentMixin.performUpdateIfNecessary   @   ReactCompositeComponent.js:421
ReactReconciler.performUpdateIfNecessary    @   ReactReconciler.js:102
runBatchedUpdates   @   ReactUpdates.js:129
Mixin.perform   @   Transaction.js:136
Mixin.perform   @   Transaction.js:136
assign.perform  @   ReactUpdates.js:86
flushBatchedUpdates @   ReactUpdates.js:147
ReactUpdates_flushBatchedUpdates    @   ReactPerf.js:66
Mixin.closeAll  @   Transaction.js:202
Mixin.perform   @   Transaction.js:149
ReactDefaultBatchingStrategy.batchedUpdates @   ReactDefaultBatchingStrategy.js:62
enqueueUpdate   @   ReactUpdates.js:176
enqueueUpdate   @   ReactUpdateQueue.js:24
ReactUpdateQueue.enqueueSetState    @   ReactUpdateQueue.js:190
ReactComponent.setState @   ReactComponent.js:65
(anonymous function)    @   Helpers.js:100
scrollSpy.updateStates  @   scroll-spy.js:36
(anonymous function)    @   Helpers.js:131
scrollSpy.scrollHandler @   scroll-spy.js:20

`unmount` should remove specific references of callbacks instead of clearing the stack

When using react router and ReactTransitionGroup, the componentDidMount of the incoming view gets called before the componentWillUnmount of the outgoing view is called. This results in the callbacks added by the new view being cleared when the old component leaves.

The Helpers.js mixin should keep references to the callbacks passed to scrollSpy, and pass those as arguments into scrollSpy.unmount(), and scrollSpy's unmount would need to accept those arguments and slice them out of the array instead of clearing the entire array.

https://github.com/fisshy/react-scroll/blob/master/modules/mixins/scroll-spy.js#L40-L41

this.spyCallbacks = [];
this.spySetState = [];

the above should be turned into something like

this.spyCallbacks.splice(this.spyCallbacks.indexOf(spyCallbackToRemove), 1);
this.spySetState.splice(this.spySetState.indexOf(spySetStateToRemove), 1);

initial selection

How to set initial selection ? In demo page, tab "Test 1" should be selected.

I try to modify getInitialSate in Link.js

getInitialState : function() {
return { active : this.props.defaultSelected? true : false};
}

Changelog

It'd be great to see a changelog for the different versions ✌️

Doesn't work on Firefox

Using version 36.0.1

"object-assign," its dependency package, doesn't seem to be installed automatically.

When Browserify was bundling, I got this error:

Error: Cannot find module 'object-assign' from 'C:\xampp\htdocs\portfolio\node_modules\react-scroll\lib\mixins

But I fixed it simply by installing object-assign.

Move to react 15?

Can someone update it to support react 15? currently it adds a whole react 0.14 into my bundle to support this feature.

Duplicate "react-addons-test-utils" in "package.json" (node "devDependencies"). npm install failed

SCRIPT65535: Invalid calling object - animate-scroll.js (96,3)

Hello! I started testing an implementation of react-scroll and everything seems to work great in Safari 9, Firefox 44.0.2, and Chrome 48.0.2564.109, all on MacOS X 10.10.5. I'm using VirtualBox with the IE11 - Win11.ova that's available from Microsoft to do some MSEdge testing. The error mentioned in the subject shows up in the console of Edge when I attempt to click on a link that was set-up with react-scroll.

The way my implementation is currently set-up is that I have a StickyHeader component that contains the event listeners and Link components for react-scroll and a separate component that contains the Element react-scroll component. A basic outline would look something like this:

<Lesson> <StickyHeader /> <Element> inner content </Element> </Lesson>

I wouldn't think that having the Link and Element components in two separate files would cause a problem and so far the only error I've seen has been in IE and not the three other major browsers. To test for this, I removed the StickyHeader component and added a vanilla Link component and still received the error.

Any insight or advice you might have would be greatly appreciated.

IE animate-scroll error

Hello,

smooth scrolling doesn't work in IE.
An error will be thrown exactly on this line
requestAnimationFrame(animateTopScroll);

can you check it please