npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-scroll-preserve

v0.6.1

Published

Scroll to top with preserved browser history scroll position

Downloads

4

Readme

ember-router-scroll

Build Status Greenkeeper badge

Scroll to page top on transition, like a non-SPA website. An alternative scroll behavior for Ember applications.

Installation

ember install ember-router-scroll

Options

You can specify the id of an element for which the scroll position is saved and set. Default is window for using the scroll position of the whole viewport. You can pass an options object in your application's config/environment.js file.

ENV['routerScroll'] = {
  scrollElement: '#mainScrollElement'
};

Moreover, if your route breaks up render into multiple phases, you may need to delay scrollTop functionality until after the First Meaningful Paint using `delayScrollTop: true` in your config.  `delayScrollTop` defaults to `false`.

```javascript
ENV['routerScroll'] = {
  delayScrollTop: true
};

A working example

See demo made by Jon Chua.

A visual demo

Before

before-scroll

Notice that the in the full purple page, the user is sent to the middle of the page.

After

after-scroll

Notice that the in the full purple page, the user is sent to the top of the page.

Why Use it?

Ember expects an application to be rendered with nested views. The default behavior is for the scroll position to be preserved on every transition. However, not all Ember applications use nested views. For these applications, a user would expect to see the top of the page on most transitions.

In addition to scrolling to the top of the page on most transitions, a user would expect the scroll position to be preserved when using the back or forward browser buttons.

ember-router-scroll makes your single page application feel more like a regular website.

Installation & Usage

  1. Install addon
ember install ember-router-scroll
  1. Import ember-router-scroll

In your app/router.js file, import the mixin:

import RouterScroll from 'ember-router-scroll';

And add RouterScroll as an extension to your Router object:

const Router = Ember.Router.extend(RouterScroll, {});
  1. Update your app's locationType

Edit config/environment.js and change locationType. Also add historySupportMiddleware: true, to get live-reload working in nested routes. (See Issue #21)

locationType: 'router-scroll',
historySupportMiddleware: true,

This location type inherits from Ember's HistoryLocation.

  1. Tests In your router and controller tests, add 'service:router-scroll' and 'service:scheduler' as dependencies in the needs: [] block:
//{your-app}}/tests/unit/routes/{{your-route}}.js
needs:[ 'service:router-scroll', 'service:scheduler' ],

Options

You can specify the id of an element for which the scroll position is saved and set. Default is window for using the scroll position of the whole viewport. You can pass an options object in your application's config/environment.js file.

ENV['routerScroll'] = {
  scrollElement: '#mainScrollElement'
};

Issues with nested routes

Before:

before-preserve

Notice the unwanted scroll to top in this case.

After:

after-preserve

Adding a query parameter or controller property fixes this issue.

preserveScrollPosition with queryParams

In certain cases, you might want to have certain routes preserve scroll position when coming from a specific location. For example, inside your application, there is a way to get to a route where the user expects scroll position to be preserved (such as a tab section).

  1. Add query param in controller

Add preserveScrollPosition as a queryParam in the controller for the route that needs to preserve the scroll position.

Example:

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: [
    'preserveScrollPosition',
  ],
});
  1. Pass in query param

Next, in the place where a transition is triggered, pass in preserveScrollPosition=true. For example

{{link-to "About Tab" 'tab.about' (query-params preserveScrollPosition=true) }}

preserveScrollPosition wiith a controller property

In other cases, you may have certain routes that always preserve scroll position, or routes where the controller can decide when to preserve scroll position. For instance, you may have some nested routes that have true nested UI where preserving scroll position is expected. Or you want a particular route to start off with the default scroll-to-top behavior but then preserve scroll position when query params change in reponse to user interaction. Using a conroller property also allows the use of preserveScrollPosition without adding this to the query params.

  1. Add query param to controller

Add preserveScrollPosition as a controller property for the route that needs to preserve the scroll position. In this example we have preserveScrollPosition initially set to false so that we get our normal scroll-to-top behavior when the route loads. Later on, when an action triggers a change to the filter query param, we also set preserveScrollPosition to true so that this user interaction does not trigger the scroll-to-top behavior.

Example:

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['filter'],

  preserveScrollPosition: false,

  actions: {
    changeFilter(filter) {
      this.set('preserveScrollPosition', true);
      this.set('filter', filter);
    }
  }
});
  1. Reset preserveScrollPosition if necessary

If your controller is changing the preserveScrollPosition property, you'll probably need to reset preserveScrollPosition back to the default behavior whenever the controller is reset. This is not necceary on routes where preserveScrollPosition is always set to true.

import Ember from 'ember';

export default Ember.Route.extend({
  resetController(controller) {
    controller.set('preserveScrollPosition', false);
  }
});

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server