Comments (6)
Keep in mind we can't simply assume the current x,y position of scroll here. One of the reqs of this lib is to reset the scroll position on each page transition, or reposition if it is in history.
So there needs to be a way to distinguish that this is an app instantiation event and ember is taking over from fastboot rendered page.
There could be a flag in an initializer for the service that is a hasStartedUp
or something like that, defaulted to false
. So on first read it will default to current browser's scroll position. On additional reads it will default to 0,0
from ember-router-scroll.
There are two issues. The first is what @bcardarella pointed out here, which is that this line is resetting the scroll position to 0,0
without taking into account where the user was scrolled before app instantiation happens.
However, even if you work around that, there's a second issue (also pointed out by @bcardarella
in #17) that causes a very unpleasant jump. Right at app instantiation, Ember erases all the HTML that came from FastBoot and renders its own HTML. That causes the app to scroll to the top of the page, and the router-scroll
service's update
function isn't called until didTransition
happens a split second later.
Here's a temporary hack to fix both of these problems. I put the following in my top-level application route:
import { scheduleOnce } from 'ember-runloop';
export default Route.extend({
setupController() {
this._super(...arguments);
if (!this.get('fastboot.isFastBoot')) {
const routerScroll = this.get('router.service');
routerScroll.set('key', window.history.state.uuid);
routerScroll.update();
scheduleOnce('afterRender', this, () => {
const scrollPosition = routerScroll.get('position');
window.scrollTo(scrollPosition.x, scrollPosition.y);
});
}
},
});
from ember-router-scroll.
Here is another workaround (until DOM hydration lands) for those getting here via Google.
The thinking is that we give the body a nice min-height
that is equal to the users current scroll position plus the page height. Then when ember is done loading and rendering the initial route, we take that min-height
away.
Add a script tag to a file you control, some vanilla JS.
<!-- index.html -->
{{content-for 'body'}}
<script src="{{rootURL}}assets/init-scroll.js"></script>
<!-- ^ this one is the important one, should be BEFORE ember scripts download -->
<script src="{{rootURL}}assets/vendor.js"></script>
// assets/init-scroll.js
(function() {
if (typeof FastBoot === 'undefined') {
document.body.style['min-height'] = document.body.clientHeight + 'px';
}
}());
Finally, you revert the body min-height
to something reasonable after your application route has finished its transition:
// routes/application.js
actions: {
didTransition() {
if (!get(this, 'fastboot.isFastBoot')) {
run.scheduleOnce('afterRender', () => {
document.body.style['min-height'] = '100vh';
});
}
}
}
Its not great, obviously DOM hydration will be better. Figured it could help the next person that googles their way to this corner of github.
from ember-router-scroll.
@bcardarella I came to the same conclusion and implemented a small demo which I haven't pushed any where.
Are you 100% sure it's because of ember-router-scroll
?
from ember-router-scroll.
I suspect this line is being hit when app starts: https://github.com/dollarshaveclub/ember-router-scroll/blob/master/addon/services/router-scroll.js#L35
from ember-router-scroll.
I gave this some thought a while ago, I think we should wait for DOM hydration before making any changes
from ember-router-scroll.
Related Issues (20)
- 1.1.0 breaks preserveScrollPosition HOT 1
- Release new version with fixed Ember 3.9 deprecations HOT 7
- deprecation warning: Setting 'locationType' to 'router-scroll' HOT 2
- deprecation warning: Setting a computed property as volatile has been deprecated HOT 2
- 1.3.0, 1.3.1 releases are incompatible with Ember Fastboot HOT 5
- preserveScrollPosition doesn't work HOT 4
- Provide non Mixin approach HOT 1
- Provide utils if don't use EmberRouter HOT 2
- Emit event when scrollTo occurs
- Could not find module `ember-test-waiters` imported from `ember-app-scheduler/scheduler` HOT 3
- Don't scroll the page during the tests
- Use `RouterService` instead of extending Ember `Router`
- Restore scroll position after transition, via history.back(), resolves HOT 2
- Don't scroll on initial load HOT 3
- Deprecation warning still present in 4.0 HOT 5
- Upgrade to version 4.x leads to test errors HOT 7
- README Correction - export DEFAULT class... HOT 2
- Allow configuration of MAX_ATTEMPTS for tryScrollRecursively
- Prevents apps from stubbing router service in unit tests HOT 1
- Allow nested controllers to override preserveScrollPosition
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 ember-router-scroll.