Skip to main content
100%

Firefox PDF.js reader autoscroll shorcuts

✓ Published0🌍 Public
UUtopiah
Last edited Aug 16, 2021
Created on Mar 2, 2019

A short JavaScript snippet adds an autoscroll feature to Firefox’s PDF.js reader. Pressing the “s” key toggles a `setInterval` that calls `scrollBy(0, 1)` on the `#viewerContainer` element every 100 milliseconds, slowly advancing the document. The code uses plain DOM APIs and a keyup event listener, with no external libraries. The animation shows continuous page movement while the shortcut is active.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist d9599cfc20b6d22a16a88e65dfa45115

Scrolleo demonstrates a scrolling-driven video playback technique, where page scroll position controls video frames with an inertial easing effect. The page presents two HTML5 videos that play and scrub as the user scrolls, mimicking Apple’s product page interactions. The implementation relies on the Scrolleo plugin, which uses `requestAnimationFrame` for smooth updates and applies an acceleration value to create momentum-based scrubbing. Videos are embedded directly in the page’s flow, with large vertical spacers ensuring ample scroll space. The code computes video timing based on scroll offset and duration, enabling frame-accurate control without explicit user interaction.

EEelsie
60% match
Loading thumbnail…

Smooth Scrolling

This example demonstrates a playful, self-scrolling page where a series of "Whee!" headings cascade down the viewport, driven entirely by a D3.js transition. The page uses a custom tween, defined via `d3.transition().tween`, to interpolate the window’s vertical scroll offset from its starting position to the bottom of the document. Specifically, `scrollTween` creates an interpolator with `d3.interpolateNumber` and applies it inside the tween’s returned function, calling `scrollTo` on each tick. The animation begins after a delay, smoothly propelling the reader through the page’s content over 7.5 seconds.

Mmbostock
59% match
Loading thumbnail…

Small Scroll-linked Animation Demo

This demo shows how scroll position can drive an SVG animation, with a clock face rotating on the right side of the screen as the user scrolls through explanatory text panels. The page uses a fixed container with a scrollable div, and JavaScript event handlers track `scrollTop` values. A `requestAnimationFrame` loop updates the rotation of the hour and minute hands, mapped through a `d3.scale` function. The code uses D3.js for SVG manipulation and includes a `window.resize` callback to recalibrate the scale domains responsively.

AAjayyy
58% match
Loading thumbnail…

scroll-unfixed

This example demonstrates a scrollytelling technique using an internal scrolling container instead of fixing a graphic to the viewport. A large orange div with `overflowY: scroll` contains an SVG of randomly generated line paths, and as the user scrolls, each line’s opacity changes based on its associated scroll position. The visualization uses D3v4 for DOM manipulation and SVG generation, and listens to the container’s `scroll` event to update line opacity dynamically, with layout handled through simple inline styles.

11wheel
58% match
Loading thumbnail…

browsing tools dotjs snippets

This example shows a collection of JavaScript snippets that add keyboard and mouse shortcuts to specific websites, such as Forrst and Dribbble. It demonstrates how jQuery is used to bind click handlers to page elements, triggering navigation to the next paginated page, and how a custom keydown handler detects the Control key to open a Dribbble shot in a new window. The code relies on jQuery selectors and CSS properties to identify active elements, and it uses `document.location` for redirection. The snippets are designed for the dotjs browser extension, which injects user scripts into matching sites.

TTBD
57% match
Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl
57% match
Loading thumbnail…

Gist 3d8c15e486359954c2b5fdaf9e3cb265

An A-Frame scene places PDFs as spatial objects, and a pencil-shaped writing target detects when the user moves within a five-unit proximity. Upon approach, the code sends the PDF’s URL to a local server via `fetch`, triggering a transfer to a reMarkable tablet, while a `setInterval` checks proximity every second. The animation shows the interaction logic, using A-Frame’s `object3D` positioning and the `media-pdf` component to identify source documents, with a deduplication flag preventing repeated sends.

UUtopiah
57% match
Loading thumbnail…

Gist 5374ae5e90acada9f9225c8154461e5f

This visualization presents an interactive tooltip and navigation system built on top of the fullpage.js scrolling framework. The code attaches click handlers to the navigation dots generated by fullpage.js, redirecting users to the corresponding section hash when clicked. It uses jQuery selectors to target the `#fp-nav > ul > li > div` elements and binds a `click` event that navigates via `document.location.href`. The example demonstrates a quick fix for making fullpage.js’s built-in dot navigation clickable, enhancing usability without altering the core library’s behavior. No external data sources or rendering libraries are involved.

UUtopiah
56% match