Comments (8)
It looks like you're initialising a new ASScroll instance every time onEnterCompleted()
is run. You want to have only one instance which you then call enable()
and disable()
on.
There's various ways of setting up a Highway renderer to run code only once on site load, but the easiest way might be to make the ASScroll instance outside of your renderer:
const asscroll = new ASScroll()
const highway = new Highway()
from asscroll.
Hey @paullangton could you paste in your code so I can see exactly what you're doing? As in your Highway onLeave()
and onEnterCompleted()
functions?
I use Highway in a lot of projects and I've never encountered this problem.
from asscroll.
Of course, here is the scroll.js have simplified it, followed by the renderer.js - I've put destroy in both onLeave() and onLeaveCompleted
Note, all components are called into a components index.js and where scroll is being called into the renderer.js file this will usually inti and destroy all the ones inside the renderer html tags.
Let me know if you need anything else.
// Scroll.js
import ASScroll from '@ashthornton/asscroll'
export default class Scroll {
constructor() {
this.scroll = new ASScroll({
element: '.o-site_wrapper',
innerElement: '.o-scroll',
customScrollbar: true
});
}
init() {
this.scroll.enable();
}
destroy() {
this.scroll.disable();
}
}
// Renderer.js
// components
import Scroll from '../components/scroll/scroll';
class Renderer extends Highway.Renderer {
onEnter() {
}
onEnterCompleted() {
this.scroll = new Scroll();
this.scroll.init();
}
onLeave() {
}
onLeaveCompleted() {
this.scroll.destroy();
}
}
// export
export default Renderer;
from asscroll.
You can set up a 'first load' function within a Highway renderer by overriding the setup()
function in the Renderer class:
class DefaultRenderer extends Highway.Renderer {
onFirstLoad() {
this.scroll = new ASScroll()
this.onEnter()
this.onEnterCompleted()
}
setup() {
this.onFirstLoad()
}
}
I do this on every project as it gives better control over that initial site load
from asscroll.
Thanks for your reply Ash.
I thought initialising the plugin after onEnterCompleted() allowed it to re-calculate the new page height.
I'v had a quick play with the DefaultRenderer extends Highway.Renderer but just can't seem to get it to initialise again after the page transition.
First time using highway.js. So will dig a bit deeper into the docs.
I note you have a highway-kit which seems to be following what you are saying so will check that out too.
from asscroll.
I thought initialising the plugin after onEnterCompleted() allowed it to re-calculate the new page height.
Calling .enable()
re-calculates the page height by default so you don't need to re-init.
I note you have a highway-kit which seems to be following what you are saying so will check that out too.
That is pretty out-dated but I think some of the core concepts are in there.
Let me know how you get on and whether or not it fixes your original issue.
from asscroll.
Hi Ash - got it working - feel free to close this.
I just removed asscroll out of it's own scroll.js file and called it directly into my components.js file where I use the enable() and disable()
That way (as you said) i'm only creating one instance of asscroll. Has fixed the page jump.
I look further into your suggestion with the firstload. Good concept.
Thank your help and quick repsonses.
from asscroll.
No worries @paullangton, glad you got it working :)
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.