src / mixin / scrolling.js

Copyright (c) 2018 Florian Klampfer

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see

import { getScrollTop, getScrollHeight } from "../common";

import { PUSH, POP } from "./constants";

Managing scroll positions

The following functions deal with managing the scroll position of the site.

export const scrollMixin = C =>
  class extends C {

TODO: doc

    assignScrollPosition(state) {
      const id = this.histId();
      return Object.assign(state, {
        [id]: Object.assign(state[id] || {}, {
          scrollTop: getScrollTop(),
          scrollHeight: getScrollHeight(),


    manageScrollPostion({ type, url: { hash } }) {
      switch (type) {
        case PUSH:

FIXME: make configurable

          this.scrollHashIntoView(hash, { behavior: "smooth", block: "start", inline: "nearest" });
        case POP: {
        case INIT:
        default: {
          if (process.env.DEBUG) console.warn(`Type '${type}' not reconginzed.`);

Given a hash, find the element of the same id on the page, and scroll it into view. If no hash is provided, scroll to the top instead.

    scrollHashIntoView(hash, options) {
      if (hash) {
        const el = document.getElementById(decodeURIComponent(hash.substr(1)));
        if (el) el.scrollIntoView(options);
        else if (process.env.DEBUG) console.warn(`Can't find element with id ${hash}`);
      } else {
        window.scroll(window.pageXOffset, 0);

Takes the current history state, and restores the scroll position.

    restoreScrollPostion() {
      const id = this.histId();
      const { scrollTop, scrollHeight } = (window.history.state && window.history.state[id]) || {};

      if (scrollTop != null) {

FIXME: Setting min-height to ensure that we can scroll back to the previous position? FIXME: Use attributeStyleMap?

        /* = `${scrollHeight}px`; */
        window.scroll(window.pageXOffset, scrollTop);

Only restore position on page reload when the user hasn’t started scorlling yet.

    restoreScrollPostionOnReload() {
      const userHasScrolled = getScrollTop() != 0;
      if (!userHasScrolled) this.restoreScrollPostion();

© 2018 Florian Klampfer

Powered by Hydejack v8.4.0