3
\$\begingroup\$

I recently recalled having a "scroll mark" feature, that is, a line that would show up when hitting the space bar in the Opera browser? There used to be a Greasemonkey script for Firefox, but even when you look for a copy, it's defunct and I couldn't find a working one, possibly because I can't convince the search engine to search for the right thing.

Screenshot to get an idea:

screenshot

In any case, below is a quick solution that I drafted and given my lack of JavaScript/CSS/browser-fu, I'd like to get some feedback and potential improvements for this, in particular:

  • is there a (much) better way to construct the marker line?
  • are width and height correctly calculated in all (or most) circumstances?
  • is there a better (short code, or more performant) way to describe the animation?
  • any other opportunities to skip updates when the bar isn't shown / off-screen?
  • is there a better way to make this behave well when scrolling with the mouse wheel, like doing a debounce step and only showing it after a short timeout, or is there another DOM feature that would allow me to only activate when a full page has been scrolled (i.e. hitting space bar)?

My plan is then to perhaps convert it to an extension as well, but that's a future review.

Feature-wise, this does what I personally want, but I could see the need for:

  • disabling the fade animation,
  • entirely disabling the automatic hiding of the marker and having a keyboard shortcut to toggle it manually,
  • colour, size maybe, anything else?

The demo here doesn't do justice to the fading effect, at least on my system it doesn't properly show, you'd have to load it into Tampermonkey to see it.

(Updated to also show on scrolling up, since nobody had answered yet.)

// ==UserScript==
// @name         Page Scroll Marker
// @namespace    https://macrolet.net/
// @version      2024-06-20
// @description  try to take over the world!
// @author       You
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=userscripts-mirror.org
// @grant        none
// ==/UserScript==

(function() {
  "use strict"

  let bar = null
  let previousPosition = window.scrollY

  function upsertBar() {
    if (bar === null) {
      bar = document.createElement("div")
      bar.style.zIndex = "2147483647"
      bar.style.width = window.innerWidth + "px"
      bar.style.height = "2px"
      bar.style.background = "red"
      bar.style.position = "absolute"
      bar.style.left = "0px"
      document.body.appendChild(bar)
    }
    if (window.scrollY > previousPosition) {
      bar.style.top = (previousPosition + window.innerHeight - 2) + "px"
    } else {
      bar.style.top = (previousPosition - 2) + "px"
    }

    bar.style.opacity = "1"
    setTimeout(function() {
      bar.style.transition = "opacity 0.5s ease-in-out"
    }, 0)
    setTimeout(function() {
      bar.style.opacity = "0"
    }, 500)
    setTimeout(function() {
      bar.style.transition = ""
    }, 1000);

    previousPosition = window.scrollY
  }

  document.addEventListener("scrollend", function (event) {
    upsertBar()
  })
})()
<pre>
 1 Lorem ipsum dolor
 2 sit amet,
 3 consectetur
 4 adipiscing elit, sed
 5 do eiusmod tempor
 6 incididunt ut labore
 7 et dolore magna
 8 aliqua. Ut enim ad
 9 minim veniam, quis
10 nostrud exercitation
11 ullamco laboris nisi
12 ut aliquip ex ea
13 commodo
14 consequat. Duis aute
15 irure dolor in
16 reprehenderit in
17 voluptate velit esse
18 cillum dolore eu
19 fugiat nulla
20 pariatur. Excepteur
21 sint occaecat
22 cupidatat non
23 proident, sunt in
24 culpa qui officia
25 deserunt mollit anim
26 id est laborum.
27 
28 Lorem ipsum dolor
29 sit amet,
30 consectetur
31 adipiscing elit, sed
32 do eiusmod tempor
33 incididunt ut labore
34 et dolore magna
35 aliqua. Ut enim ad
36 minim veniam, quis
37 nostrud exercitation
38 ullamco laboris nisi
39 ut aliquip ex ea
40 commodo
41 consequat. Duis aute
42 irure dolor in
43 reprehenderit in
44 voluptate velit esse
45 cillum dolore eu
46 fugiat nulla
47 pariatur. Excepteur
48 sint occaecat
49 cupidatat non
50 proident, sunt in
51 culpa qui officia
52 deserunt mollit anim
53 id est laborum.
</pre>

\$\endgroup\$
5
  • 2
    \$\begingroup\$ Would you please edit, so this is a Snippet that is visible live within the CodeReview site? Thx. \$\endgroup\$
    – J_H
    Commented Jun 20 at 12:48
  • \$\begingroup\$ @J_H sure, is that any better? Looks like it works as a standalone frame as well, good to know. \$\endgroup\$
    – ferada
    Commented Jun 20 at 12:57
  • 1
    \$\begingroup\$ Very nice, thank you. Though I confess to seeing some flicker / redrawing when using the usual trackpad vertical scrolling gestures within Firefox. The PageDown key appears to be identical to SPACE, and both "d" (think /usr/bin/less "down") and PageUp seem to be ignored. My understanding of the UX is that you're trying to help the user quickly resume reading after a big scroll operation. Maybe it would demo a little better with a bunch of Lorem Ipsum, plus line numbers running down the left margin? \$\endgroup\$
    – J_H
    Commented Jun 20 at 16:37
  • \$\begingroup\$ Done, thanks. The flickering isn't quite as bad when running it as a user script. Though I'm sure this solution as-is isn't the best way anyway, thus the post. \$\endgroup\$
    – ferada
    Commented Jun 20 at 20:22
  • \$\begingroup\$ You're right, I completely skipped the scrolling up part, that would make sense to have it insert the bar at the top in that case. Have to add it. \$\endgroup\$
    – ferada
    Commented Jun 20 at 20:24

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.