configurable scroll element

README.md

@@ -10,6 +10,15 @@
 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 applications `config/environment.js` file.
+
+```javascript
+ENV['routerScroll'] = {
+  scrollElement: '#mainScrollElement'
+};
+```
+
 ### A small note
 
 Like all good ember addons, this behavior was considered for core implementation. Good news, people like the idea. For now, the feature will live under the flag `ember-unique-location-history-state` until it's finally released in Ember 2.13. You can follow along for yourself [here](https://github.com/emberjs/ember.js/pull/14011/) and read up on the [RFC](https://github.com/emberjs/rfcs/pull/186#issuecomment-271416805) if you'd like as well.

addon/index.js

@@ -28,13 +28,24 @@ export default Mixin.create({
   },
 
   updateScrollPosition(transitions) {
+    const scrollElement = get(this, 'service.scrollElement');
     let scrollPosition = get(this, 'service.position');
 
     let preserveScrollPosition = transitions[transitions.length - 1]
       .handler.controller.get('preserveScrollPosition');
 
     if (!preserveScrollPosition) {
-      window.scrollTo(scrollPosition.x, scrollPosition.y);
+      if ('window' === scrollElement) {
+        window.scrollTo(scrollPosition.x, scrollPosition.y);
+
+      } else if ('#' === scrollElement.charAt(0)) {
+        let element = document.getElementById(scrollElement.substring(1));
+
+        if (element) {
+          element.scrollLeft = scrollPosition.x;
+          element.scrollTop = scrollPosition.y;
+        }
+      }
     }
   }
 });

addon/services/router-scroll.js

@@ -1,20 +1,42 @@
 /* eslint-disable */
+import Ember from 'ember';
 import Service from '@ember/service';
 import { getWithDefault, computed, set, get } from '@ember/object';
 
+const { getOwner, typeOf } = Ember;
+
 export default Service.extend({
+  scrollElement: 'window',
+
   init(...args) {
     this._super(...args);
+    this._loadConfig();
     set(this, 'scrollMap', {});
     set(this, 'key', null);
   },
 
   update() {
+    const scrollElement = get(this, 'scrollElement');
     const scrollMap = get(this, 'scrollMap');
     const key = get(this, 'key');
+    let x;
+    let y;
+
+    if ('window' === scrollElement) {
+      x = window.scrollX;
+      y = window.scrollY;
+
+    } else if ('#' === scrollElement.charAt(0)) {
+      let element = document.getElementById(scrollElement.substring(1));
+
+      if (element) {
+        x = element.scrollLeft;
+        y = element.scrollTop;
+      }
+    }
 
-    if (key) {
-      set(scrollMap, key, { x: window.scrollX, y: window.scrollY });
+    if (key && 'number' === typeOf(x) && 'number' === typeOf(y)) {
+      set(scrollMap, key, { x, y });
     }
   },
 
@@ -27,4 +49,16 @@ export default Service.extend({
 
     return getWithDefault(scrollMap, key, { x: 0, y: 0 });
   }).volatile(),
+
+  _loadConfig() {
+    const config = getOwner(this).resolveRegistration('config:environment');
+
+    if (config && config.routerScroll && config.routerScroll.scrollElement) {
+      const scrollElement = config.routerScroll.scrollElement;
+
+      if ('string' === typeOf(config.routerScroll.scrollElement)) {
+        set(this, 'scrollElement', config.routerScroll.scrollElement);
+      }
+    }
+  }
 });