vikliegostaiev / react-page-scroller Goto Github PK

Attempted import error: 'Pager' is not exported from 'react-bootstrap'.

I've tried version 2.0.2 Beta but the issue #35 isn't fixed for me on either iOS or Android. Any suggestions how to fix this?

I get the following error when trying to use along with the new react hook ref.
target Element not found

When scroll to another page sometimes it doesnt show the content of next page it only shows blank page and scrolling doesnt work at that time .

in image you see content is is not showing and in this situation scroll doesnt happen. like now i am trying to scroll to next page it is not working. but if i click on indicator then content will shown up.

I have 7 components inside mi ScrollPage Component. When i'm in the web page, initially only render 2 components, if i scroll down, the next component will appear.

Example of my code of PageScroller

example of wrap elements. it just rendering 2 components at the beginning.

if i scroll, the next component will appear. As you can see, the last component is "Productos", where the last one should be "Contacto".

I need to render all components at the beginning, How can i approach that?

You can see the web site in this url: https://webmarina.now.sh/
and the code in this github repository: https://github.com/MarinaVVsoftware/WebMarina

Hello again,
I installed 2.0.0-beta version via npm but renderAllPagesOnFirstRender still not working, i also tried to found it in source code in node_modules/react-page-scroller but it is not available in package also

Attempting to use a Select and AsyncSelect list and unable to scroll through the modal without scrolling to next page. Breaks UX of majority of child components. Any advice?

Hello!
If you clicked on last page in navbar and then scroll down, page scroll down even after last component.

only one instance of babel-polyfill is allowed - error is thrown

I am using react page scroller in my reactjs project. I am facing the issue on scrolling . when I am scrolling page it is triggering the pageOnChange function after completion of page scroll instead of triggering when scroll is happening.

Step 1
Scrolled the mouse Wheel.
Step 2
Page starts sliding and taking to other page.
Step 3
pageOnChange is triggered.

What I want is :
When I scroll pageOnChange triggered at same time . not after the completion of scroll process

Hi Guys, when I use "a href="#id" tag on sideBar to change the view to a component on the main page, "a" tag does not work correctly.! do you have any solution for that?!

data on scroller not showing

Hello, the problem is that after the user has clicked on navigation it triggers pageOnChange, pageOnChange does not update the page value and returns current page to the callback. After few milliseconds (when scroll to page) it triggers again.

That process leads to repeatedly state update.

Video: vimeo link

2.0.2-beta works fine, but I can't import the module into a component in the latest version.

Is it possible to enable simple scrollbar, or I can use only page numbers like in example?

Hello!

I got next message in ReactPageScroller Component

Line 227:21: The ref value 'pageContainer.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'pageContainer.current' to a variable inside the effect, and use that variable in the cleanup function react-hooks/exhaustive-deps
Line 238:6: React Hook useEffect has a missing dependency: 'checkRenderOnMount'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 294:6: React Hook useEffect has missing dependencies: 'animationTimer', 'animationTimerBuffer', 'children', 'componentIndex', and 'componentsToRenderLength'. Either include them or remove the dependency array react-hooks/exhaustive-deps

Is it possible to fix it somehow?

Thank you very much

Hi,
I have a link on page 1 using Page 4. How can I make it go to page 4?
Currently, I am using this on my navigation bar using the Pager from react-bootstrap, however I am having hard time understanding how I can use this with just the tag.

<ReactPageScroller ref={r => this.reactPageScroller = r} pageOnChange={this.onPageScroll}>

Thank you,
Leizle

wheelScroll method in this source code is dependent on event.wheelDeltaY but that value is always undefined faced this problem only in firefox

Because of this user was not able to move scrollWindowUp

Would be nice to have an option to disallow scroll, ex : a multi-step website where each step is a page in <ReactPageScroller /> and step should be completed before moving on next one.

Because page transition is done via transform, library like aos or '
react-animate-on-scroll won't work when using 'react-page-scroller').

I was doing some extensions (hooks) which enable using @Keyframes animation.
You can check it out at: GitHub: react-animate-page-on-scroll-playground

I'm willing to contribute it (with some further functionality, which we use on our production code) to this repo, or creating new repo for the extended functionality.

Would you like to have pull request or prefer it to be on separate repo?

It would be nice to have an option for page that don't require to be full height, ex headers and footers, similarly to what fullpage.js provides.

Hi, is it possible to jump to another component without scrolling? I've managed to make the react page scroller work, but also need the page to be able to navigate directly to another component when clicking an element. Any suggestions?

On key/mouse scroll page change the index reported via pageOnChange starts from 1...n
The goToPage uses 0 index based array

So if you call goToPage with index 1 goes to page 2 (correct) but reports index 1 on pageOnChange (incorrect, should be index 2).

How to disable on mobile sites?

Hi, Im having an issue with scrolling.
When I scroll on my Phone everything works fine.
On my Mac I can't scroll as usually because it scrolls two sides.
When I scroll just very little everything works fine.

Is there any way out to tackle this situation. I want to change the page number in react-page-scroller only if on scroll vertical not horizontally

Example if I am using a trackpad I only want a vertical scroll on function pageOnChange .

when i try to sroll through the section pressing the keyboard arrowkeys it doesn't work

Hello,
Thanks for your project. I can't find a way to scroll into a component without affecting the next component.

Here's a code sample : https://codesandbox.io/s/modest-lamport-5yjbb?fontsize=14&hidenavigation=1&theme=dark

Thanks for your help

Thanks for awesome one-page scroll for React :)
So far I am implementing your codes into my React project yet it would be better if I can set a custom className to component as well as I found that the Pager component from React-Bootstrap isn't working anymore. For my case I fixed this issue with latest Bootstrap-react's Nav and NavLink components.
Thanks for reading :)

Running gatsby build after installing this package in my project. I get the following error:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  385 |   animationTimer: 1000,
  386 |   transitionTimingFunction: 'ease-in-out',
> 387 |   containerHeight: window.innerHeight,
      | ^
  388 |   containerWidth: window.innerWidth
  389 | }),
  390 | _temp)


  WebpackError: window is not defined

  - index.js:387 Object.<anonymous>
    ~/react-page-scroller/lib/index.js:387:1

  - index.js:4 Object.exports.__esModule
    src/pages/index.js:4:1

  - sync-requires.js:11 Object.exports.__esModule
    .cache/sync-requires.js:11:51

  - static-entry.js:8 Object.<anonymous>
    .cache/static-entry.js:8:1

When i run website in mobile and start scrolling it jumps like in desktop version, for example in Google Chrome when i am trying to go up from down it refreshes page, it will be great feature if i be able to disable scroll "jumping" if website runs on mobile. Thanks

• On my React projects, I found, with React-Router-Dom, when move between pages with one page scroll and without the plugins, it causes a random touch moves blockage on mobile devices ( confirmed both iPhoneX and iPad Pro ). I noticed that preventDefault for ontouchmove causes this issue, so added snippet which return it into its original state ( enable touch move ) when component is getting unmounted.

• I added isMounted flags in order to prevent scroll methods are fired even after the component is unmounted. On console, it shows me already fired events kept trying to change its unmounted component's state.

2.0.7 beta has a strange iOS bug, where scrolling to the last slide locks you there. i am not sure if it's specific to the iOS simulator, but downgrading to 2.0.6 seems to have resolved the issue.

i will look into it later, but has anybody else seen this issue?

edit: my fault. this was mostly a CSS index issue.

I have a Google Map div in mi page, this UI element contain a lot of events attached like "onMouseOver", "MouseScroll", "MouseClick", etc.

When i try to interact with my google map using scroll, obviusly this interfers with "react-page-scroller" scroll event and both of them works when i scroll.

I need a way to turn off your page scroller component, or something such like that.

I am testing the swipe in mobile mode on Chrome.

Swipe up and down is possible, and when swiping left and right, I want to prevent the page from scrolling. Is there a way?

I am currently using react-page-scroller and SwiperJS at the same time.

Hello @VikLiegostaiev. Can you add into library callback before page was scrolled?
This will help to animate custom elements during page was scrolled.

User cannot scroll past second slide on mobile devices. Please see PR for details: #64

I want to scroll my page horizontally
I wonder it supported

It would be nice to have a prop to set the inital page. I am using redux to manage app state and calling goToPage on load fails.

Hello, I've been playing with your component and love that it's working with SSR so far.

I did notice however, that when attempting to change the state on any component inside the PageScroller wrapper when an onPageChange occurs nothing happens. I'm assuming that since these components are children on the parent PageScroller component there is nothing in the parent to trigger the state change.

I'm essentially trying to create onEnter and onExit entrance animations for each page component wrapped in the PageScroller. So when you re-enter the page component, an entrance animation will re-occur.

I'm wondering if there is a way to achieve this functionality, or a way to trigger a state change in those child components?

When i try to add overflow: scroll; to my pages, it starts to scroll the div on the page but then jumps to a previous page. It also seams to be calling the pageOnChange function when i try to scroll a div with overflow. Is there a work around for this?

hi! awesome package,
but i have an issue:
on mobile device when you tap and switch pages, scrolled only the first page, another disabled.

Hi! How to add active class to a pager item?

Hi im trying to implement this with gsap, is there a way i can play tween before scrolling to a page? an example i think is an exit animation before scrolling to another component. Thanks!

I have a problem with goToPage method called on page scroller.
I have done everything like in example and it's still not working...

`
import React, {Component} from 'react';
import './App.scss';
import Header from "./Component/Header/Header";
import ReactPageScroller from "react-page-scroller";
import Navigation from "./Component/Navigation/Navigation";

class App extends Component {

constructor(props) {
    super(props);
    this.reactPageScroller = null;
}

goToPage = (pageNumber) => {
    this.reactPageScroller.goToPage(pageNumber);
};

render() {
    return (
        <>
            <div>
                <button onClick={this.goToPage(1)}>Test</button>
                <Navigation/>
                <ReactPageScroller ref={e => {this.reactPageScroller = e }}>
                    <Header/>
                    <div>
                        tt
                    </div>
                </ReactPageScroller>
            </div>
        </>
    );
}

}

export default App;
`

it's giving me an error:

TypeError: Cannot read property 'goToPage' of null

and it refers to this:
goToPage = (pageNumber) => { this.reactPageScroller.goToPage(pageNumber); };

Hello, I am having an issue updating the state of child components inside of the Page Scroller. Initial props will pass to the children, but then they will not update dynamically. I saw the closed issue #8 on this, but it seems that the updated code may have not solved the problem. Thank you.