Return to Question

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.)

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.)

deleted 273 characters in body

Source Link

edited Jul 12, 2024 at 11:20

ferada

edited Jul 12, 2024 at 11:20

ferada

11.4k
25
65

// ==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"
 bardocument.stylebody.top = appendChild(previousPosition + window.innerHeight - 2bar) + "px"
 }
 document.body.appendChild(bar)
 if (window.scrollY }> elsepreviousPosition) {
 bar.style.top = (previousPosition + window.innerHeight - 2) + "px"
 } if (previousPosition > window.scrollY)else {
 bar.style.opacitytop = "0"
(previousPosition - 2) + }"px"
 else {
 }
 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>

// ==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"
 bar.style.top = (previousPosition + window.innerHeight - 2) + "px"
 document.body.appendChild(bar)
 } else {
 bar.style.top = (previousPosition + window.innerHeight - 2) + "px"
 } if (previousPosition > window.scrollY) {
 bar.style.opacity = "0"
 } else {
 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>

// ==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>