detect the total added up scroll distance
up vote
0
down vote
favorite
I want to detect the total distance the user scrolled on a website. Therefore I want to add up the scroll distance downwards as well as the scroll distance upwards.
So for example: the user scrolls 150px downwards and scroll back to the top of the page the result should be 300px.
With window.pageYOffset I can detect the distance downwards. How can I add both directions up?
// edit:
javascript scroll
asked Nov 11 at 20:39
iamrobin.
316413
add a comment |
up vote
0
down vote
favorite
I want to detect the total distance the user scrolled on a website. Therefore I want to add up the scroll distance downwards as well as the scroll distance upwards.
So for example: the user scrolls 150px downwards and scroll back to the top of the page the result should be 300px.
With window.pageYOffset I can detect the distance downwards. How can I add both directions up?
// edit:
javascript scroll
asked Nov 11 at 20:39
iamrobin.
316413
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I want to detect the total distance the user scrolled on a website. Therefore I want to add up the scroll distance downwards as well as the scroll distance upwards.
So for example: the user scrolls 150px downwards and scroll back to the top of the page the result should be 300px.
With window.pageYOffset I can detect the distance downwards. How can I add both directions up?
// edit:
javascript scroll
asked Nov 11 at 20:39
iamrobin.
316413
I want to detect the total distance the user scrolled on a website. Therefore I want to add up the scroll distance downwards as well as the scroll distance upwards.
So for example: the user scrolls 150px downwards and scroll back to the top of the page the result should be 300px.
With window.pageYOffset I can detect the distance downwards. How can I add both directions up?
// edit:
javascript scroll
javascript scroll
asked Nov 11 at 20:39
iamrobin.
316413
asked Nov 11 at 20:39
iamrobin.
316413
edited Nov 11 at 21:42
asked Nov 11 at 20:39
iamrobin.
316413
asked Nov 11 at 20:39
iamrobin.
316413
asked Nov 11 at 20:39
iamrobin.
316413
316413
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
You need a counter – totalOffset. You need to check current scroll position – currOffset. You need a function that fires on scroll and calculates the distance between current and cached position and that updates the counter and the cached position.
let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
"scroll",
() =>
let addedOffset = Math.abs(currOffset - window.pageYOffset);
totalOffset += addedOffset;
currOffset = window.pageYOffset;
console.log('the total scroll in px is: ', totalOffset);
,
false
);<div style="min-height:2000px">
<div>It might not work ideally in SO snippet runner, but it seems to work fine in a browser.
answered Nov 11 at 20:57
HynekS
399413
thanks for your solution! But seems like the other way around. Works fine in SO snippet runner but doesn't work in browser. I've edit a screenshot of the values in the topic above. But I can't find the error in your code.
– iamrobin.
Nov 11 at 21:41
Thanks for a feedback. I don't really have a clue why it doesn't work for you, sorry. I've tested it in both Chrome and FF and it seems O.K. The only difference is that i've set themax-heighttobodyinstead ofdiv, but I don't think it would be the problem.
– HynekS
Nov 11 at 22:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253011%2fdetect-the-total-added-up-scroll-distance%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You need a counter – totalOffset. You need to check current scroll position – currOffset. You need a function that fires on scroll and calculates the distance between current and cached position and that updates the counter and the cached position.
let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
"scroll",
() =>
let addedOffset = Math.abs(currOffset - window.pageYOffset);
totalOffset += addedOffset;
currOffset = window.pageYOffset;
console.log('the total scroll in px is: ', totalOffset);
,
false
);<div style="min-height:2000px">
<div>It might not work ideally in SO snippet runner, but it seems to work fine in a browser.
answered Nov 11 at 20:57
HynekS
399413
thanks for your solution! But seems like the other way around. Works fine in SO snippet runner but doesn't work in browser. I've edit a screenshot of the values in the topic above. But I can't find the error in your code.
– iamrobin.
Nov 11 at 21:41
Thanks for a feedback. I don't really have a clue why it doesn't work for you, sorry. I've tested it in both Chrome and FF and it seems O.K. The only difference is that i've set themax-heighttobodyinstead ofdiv, but I don't think it would be the problem.
– HynekS
Nov 11 at 22:16
add a comment |
up vote
1
down vote
accepted
You need a counter – totalOffset. You need to check current scroll position – currOffset. You need a function that fires on scroll and calculates the distance between current and cached position and that updates the counter and the cached position.
let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
"scroll",
() =>
let addedOffset = Math.abs(currOffset - window.pageYOffset);
totalOffset += addedOffset;
currOffset = window.pageYOffset;
console.log('the total scroll in px is: ', totalOffset);
,
false
);<div style="min-height:2000px">
<div>It might not work ideally in SO snippet runner, but it seems to work fine in a browser.
answered Nov 11 at 20:57
HynekS
399413
thanks for your solution! But seems like the other way around. Works fine in SO snippet runner but doesn't work in browser. I've edit a screenshot of the values in the topic above. But I can't find the error in your code.
– iamrobin.
Nov 11 at 21:41
Thanks for a feedback. I don't really have a clue why it doesn't work for you, sorry. I've tested it in both Chrome and FF and it seems O.K. The only difference is that i've set themax-heighttobodyinstead ofdiv, but I don't think it would be the problem.
– HynekS
Nov 11 at 22:16
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You need a counter – totalOffset. You need to check current scroll position – currOffset. You need a function that fires on scroll and calculates the distance between current and cached position and that updates the counter and the cached position.
let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
"scroll",
() =>
let addedOffset = Math.abs(currOffset - window.pageYOffset);
totalOffset += addedOffset;
currOffset = window.pageYOffset;
console.log('the total scroll in px is: ', totalOffset);
,
false
);<div style="min-height:2000px">
<div>It might not work ideally in SO snippet runner, but it seems to work fine in a browser.
answered Nov 11 at 20:57
HynekS
399413
You need a counter – totalOffset. You need to check current scroll position – currOffset. You need a function that fires on scroll and calculates the distance between current and cached position and that updates the counter and the cached position.
let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
"scroll",
() =>
let addedOffset = Math.abs(currOffset - window.pageYOffset);
totalOffset += addedOffset;
currOffset = window.pageYOffset;
console.log('the total scroll in px is: ', totalOffset);
,
false
);<div style="min-height:2000px">
<div>It might not work ideally in SO snippet runner, but it seems to work fine in a browser.
let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
"scroll",
() =>
let addedOffset = Math.abs(currOffset - window.pageYOffset);
totalOffset += addedOffset;
currOffset = window.pageYOffset;
console.log('the total scroll in px is: ', totalOffset);
,
false
);<div style="min-height:2000px">
<div>let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
"scroll",
() =>
let addedOffset = Math.abs(currOffset - window.pageYOffset);
totalOffset += addedOffset;
currOffset = window.pageYOffset;
console.log('the total scroll in px is: ', totalOffset);
,
false
);<div style="min-height:2000px">
<div>answered Nov 11 at 20:57
HynekS
399413
edited Nov 11 at 21:09
answered Nov 11 at 20:57
HynekS
399413
answered Nov 11 at 20:57
HynekS
399413
answered Nov 11 at 20:57
HynekS
399413
399413
thanks for your solution! But seems like the other way around. Works fine in SO snippet runner but doesn't work in browser. I've edit a screenshot of the values in the topic above. But I can't find the error in your code.
– iamrobin.
Nov 11 at 21:41
Thanks for a feedback. I don't really have a clue why it doesn't work for you, sorry. I've tested it in both Chrome and FF and it seems O.K. The only difference is that i've set themax-heighttobodyinstead ofdiv, but I don't think it would be the problem.
– HynekS
Nov 11 at 22:16
add a comment |
thanks for your solution! But seems like the other way around. Works fine in SO snippet runner but doesn't work in browser. I've edit a screenshot of the values in the topic above. But I can't find the error in your code.
– iamrobin.
Nov 11 at 21:41
Thanks for a feedback. I don't really have a clue why it doesn't work for you, sorry. I've tested it in both Chrome and FF and it seems O.K. The only difference is that i've set themax-heighttobodyinstead ofdiv, but I don't think it would be the problem.
– HynekS
Nov 11 at 22:16
thanks for your solution! But seems like the other way around. Works fine in SO snippet runner but doesn't work in browser. I've edit a screenshot of the values in the topic above. But I can't find the error in your code.
– iamrobin.
Nov 11 at 21:41
thanks for your solution! But seems like the other way around. Works fine in SO snippet runner but doesn't work in browser. I've edit a screenshot of the values in the topic above. But I can't find the error in your code.
– iamrobin.
Nov 11 at 21:41
Thanks for a feedback. I don't really have a clue why it doesn't work for you, sorry. I've tested it in both Chrome and FF and it seems O.K. The only difference is that i've set the
max-height to body instead of div, but I don't think it would be the problem.– HynekS
Nov 11 at 22:16
Thanks for a feedback. I don't really have a clue why it doesn't work for you, sorry. I've tested it in both Chrome and FF and it seems O.K. The only difference is that i've set the
max-height to body instead of div, but I don't think it would be the problem.– HynekS
Nov 11 at 22:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253011%2fdetect-the-total-added-up-scroll-distance%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
