Add 'page follow' feature to jupyter notebook pages
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.
| // ==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')) | |
| } |