Comments (10)
Hi @nnaji-victor, this one will be hard to debug without seeing the problem myself, is there a way you can create a reduced working demo on Codepen for example, or share more of your code?
The disable never seems to work unless I use it without the conditionals.
Does this mean disabling does what it is supposed to if you just call it outside the conditional?
Also, you should need to call asscroll.enable(true)
when re-enabling as the first parameter controls the restoration of the scroll position you were at when you called .disable()
from asscroll.
I made this quick demo to demonstrate the issue I am currently facing https://ikunw.sse.codesandbox.io/
The sandbox is https://codesandbox.io/s/xenodochial-brahmagupta-ikunw
from asscroll.
I can't see asscroll.disable()
being called anywhere. You need to call this to prevent the page from scrolling.
from asscroll.
Yes. I mean, I only need the asscroll.disable() when the menu is open and then enabled when the menu is closed.
I have updated the layout.js to include this conditional - open ? asscroll.disable(): asscroll.enable();
the issue still persisted.
Take a look again at the sandbox.
https://codesandbox.io/s/xenodochial-brahmagupta-ikunw?file=/src/components/layout.js:994-1043
from asscroll.
I'm not that familiar with React, but won't that just check if open
is true/false when first loading the page? It's not being called each time open
changes.
I'm unable to make changes to the codesandbox without it forking my own version, which can't run because of errors.
Can you share an editable version?
from asscroll.
The conditional is inside a useEffect where open is passed as a dependency meaning that it will always run when there is a change in open.
I can invite you to edit it without having to run install. I will need your email to do that.
from asscroll.
Are you able to invite using just my username? ashthornton
from asscroll.
I see what the issue is - the useEffect
callback is being run every time the button is pressed, so you're making new instances of ASScroll every time. You need to run all of that code just once, then run asscroll.enable/disable during the effect callback.
from asscroll.
Thank you for your assistance. Now I know what the problem is However, Instantiating ASScroll outside a useEffect will trigger an error so I will take some time to find the best way to fix it.
from asscroll.
Someone had a similar issue I believe: #18
This might help: https://www.gatsbyjs.com/docs/debugging-html-builds/#how-to-check-if-window-is-defined
from asscroll.
Related Issues (20)
- Provide way to detect if the page is actively being transformed
- Fix auto-inversion of target position when using .scrollTo on touch devices
- Add a jumpTo type method HOT 1
- Scroll jumps up when enabling
- Scroll jumps back to initial start position on Nuxt? HOT 1
- Works in Codepen only HOT 1
- Jumps farther than expected in firefox HOT 2
- Is it possible to have tabindex inputs and buttons work with AsScroll? HOT 2
- Is it possible to disable AsScroll? HOT 1
- How to know when an element scrolls into view? HOT 2
- Window jumps to top when using a form in Safari v15.4 HOT 2
- Does not scroll while mouse is over iframe. HOT 4
- How to properly remove event listener on window.object? HOT 3
- Asscroll not working with scrolltrigger which consist horizontal scroll HOT 1
- Position fixed seems to kill performances on safari HOT 1
- Position Fixed Problems HOT 1
- Tab focus not working for horizontal scroll
- Not working with Next.js HOT 1
- After a few seconds, couldn't scrolling with nextjs HOT 5
- Unable to scroll on div with absolute
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from asscroll.