jupyter notebook page follower

README.md

jupyter notebook page follower

Add 'page follow' feature to jupyter notebook pages

Install

1. Install Tampermonkey
2. Install this userscript

Use

Scrolling to the bottom of the notebook enables the feature, which means that as the notebook height gets larger, the page will continually be auto-scrolled to the bottom.

Scrolling up in the notebook disables the feature.

JupyterPageFollower.user.js

// ==UserScript==
// @name         jupyter notebook page follow
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Add 'page follow' feature to jupyter notebook pages
// @author       Chris Deacy
// @match        http*://*/notebook*/*
// @downloadURl  https://gist.github.com/chrisdothtml/51c2b5ca2dc9c498fe27d0d464b47801/raw/JupyterPageFollower.user.js
// @updateURl    https://gist.github.com/chrisdothtml/51c2b5ca2dc9c498fe27d0d464b47801/raw/JupyterPageFollower.user.js
// @grant        none
// ==/UserScript==

{
  class Scroller {
    constructor(el) {
      this.el = el
      this.lastScrollPos = this.el.scrollTop
      this.isFollowing = false
      this.isPolling = false

      // add scroll event listener
      this.el.onscroll = this._handleScroll.bind(this)
    }

    startPolling() {
      // add interval to constantly keep page at bottom
      setInterval(this._followPage.bind(this), 100)
      this.isPolling = true
    }

    isAtBottom() {
      return this.el.clientHeight + this.el.scrollTop === this.el.scrollHeight
    }

    scrollToBottom() {
      this.el.scrollTo({ top: this.el.scrollHeight, behavior: 'smooth' })
    }

    _handleScroll() {
      // this prevents the polling from starting until the user has
      // manually scrolled on the page at least once
      if (!this.isPolling) {
        if (this.el.scrollTop > 0) {
          this.startPolling()
        }
        return
      }

      if (this.el.scrollTop < this.lastScrollPos && this.isFollowing) {
        console.info('[page follow] no longer following')
        this.isFollowing = false
      }

      if (this.isAtBottom() && !this.isFollowing) {
        console.info('[page follow] starting to follow')
        this.isFollowing = true
      }

      this.lastScrollPos = this.el.scrollTop
    }

    _followPage() {
      if (this.isFollowing && !this.isAtBottom()) {
        this.scrollToBottom()
      }
    }
  }

  // add to global scope for debugging
  window.JUYTER_SCROLLER = new Scroller(document.getElementById('site'))
}