-
Notifications
You must be signed in to change notification settings - Fork 20
useLocomotiveScroll is returing null inside scroll #20
Comments
Hello, Have the same prob? |
I'm having the same issue |
Any new updates on this? Same problem here @toinelin |
Just add a check for it:
|
doesnt work for me, having this issue as well |
I am too. But I have the provider in a layout file wrapping my pages rather than the whole app since I'm using gatsby. I get the error I believe it's unrelated since there is smooth scrolling and everything else is still working. |
Did anyone find a workaround ? I've been facing the same issue ( |
Hi, sorry for not having reply to this one. Could you give me a repro so that I can try to help? I'm not using gatsby so maybe there is something missing related to this usage. @adamatronix I fixed the display of this error message, it should be good now if you update the package |
Experiencing issue as well in Nextjs environment. |
Also experiencing this in Next.js, unable to to do anything with Any idea what's up with this? |
Not exactly sure the exact case is: // Import scroll stuff
import {
LocomotiveScrollProvider,
useLocomotiveScroll,
} from "react-locomotive-scroll";
...
function App() {
// Define scroll
const { scroll } = useLocomotiveScroll();
// Define the loco scroll ref
const locoscroll = React.useRef(null);
return(<LocomotiveScrollProvider
options={{ smooth: true }}
containerRef={locoscroll}
watch={[]}
>
...
// Button that should scroll to another ref within the data-scroll-container
<button onClick={() => scroll.scrollTo(anotherRef)}>Button</button>
...
<main data-scroll-container ref={locoscroll} id="loco-scroll-container">
...
// anotherRef is inside here
</main>
)
} (Note button is outside
|
Related to #11 |
I have the same issue, any updates on this? @toinelin |
any update @toinelin ?, i have some issue |
@deepushajia @nashvinxtn @farissyf30 @ndimatteo Hi, I think I've got the solution, and it's very very trivial: be sure EACH section or div that have attributes such as 'data-scroll', 'data-scroll-speed'... are wrapped into a 'data-scroll-section'. Here is an example: Without "data-scroll-section", it gives the error below: |
@Fedinjo Already have the data-scroll-section, but still not working. ALL sections Here.... |
Apparently is a bug i had the same issue but if you have a global layout component with scroll instantiated you can wrap all in a context provider and set a react state to the scroll param returned in LocomotiveScrollProvider like this:
|
const { scroll } = useLocomotiveScroll()
I have used this hook to get an instance of scroll but is returning
null
in one of my component. The rest of the setup is done according to the documentation.The text was updated successfully, but these errors were encountered: