From what I understand this script calculate the initial position and advances one pixel at a time but in a 10ms rate so it seems like a smooth scrolling.
I like that, but I want it to call the scrolling only when the user is not interacting, in other words, I want it to stop scrolling as soon as the user interacts with the page. How can I accomplish such thing?
var currentpos = 0,
alt = 1,
curpos1 = 0,
curpos2 = -1
function initialize() {
startit()
}
function scrollwindow() {
if (document.all)
temp = document.body.scrollTop
else
temp = window.pageYOffset
if (alt == 0)
alt = 1
else
alt = 0
if (alt == 0)
curpos1 = temp
else
curpos2 = temp
if (curpos1 != curpos2) {
if (document.all)
currentpos = document.body.scrollTop + 1
else
currentpos = window.pageYOffset + 1
window.scroll(0, currentpos)
} else {
currentpos = 0
window.scroll(0, currentpos)
}
}
function startit() {
setInterval("scrollwindow()", 10)
}
window.onload = initialize;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat interdum varius sit amet mattis vulputate enim nulla. A erat nam at lectus urna duis convallis. Eget nunc lobortis mattis
aliquam faucibus purus. Sollicitudin ac orci phasellus egestas tellus rutrum. Tristique magna sit amet purus gravida quis blandit. Morbi non arcu risus quis varius. Dictumst vestibulum rhoncus est pellentesque elit. Euismod nisi porta lorem mollis aliquam
ut porttitor. Curabitur gravida arcu ac tortor dignissim convallis aenean. Quis blandit turpis cursus in hac habitasse platea dictumst. Nibh praesent tristique magna sit amet. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Arcu cursus
vitae congue mauris rhoncus aenean vel elit. Ac turpis egestas integer eget aliquet nibh. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Varius morbi enim nunc faucibus a pellentesque. Eu consequat ac felis donec et odio pellentesque.
Aliquet risus feugiat in ante metus dictum at tempor commodo. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Tristique risus nec feugiat in fermentum posuere urna nec. Nulla aliquet enim tortor at auctor. Sed felis eget velit
aliquet sagittis id consectetur. Viverra suspendisse potenti nullam ac tortor. Ultrices dui sapien eget mi. Ornare suspendisse sed nisi lacus sed viverra. Faucibus vitae aliquet nec ullamcorper sit. Sodales ut etiam sit amet nisl purus. Dictum non consectetur
a erat nam at lectus. Ipsum faucibus vitae aliquet nec. Id leo in vitae turpis massa sed. Felis eget nunc lobortis mattis aliquam. Vitae tempus quam pellentesque nec nam aliquam. Eget magna fermentum iaculis eu non diam. Adipiscing elit duis tristique
sollicitudin nibh sit. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Euismod lacinia at quis risus sed vulputate odio ut. Bibendum neque egestas
congue quisque. Cras ornare arcu dui vivamus. Eget aliquet nibh praesent tristique. Lectus magna fringilla urna porttitor. Venenatis tellus in metus vulputate eu. Elit sed vulputate mi sit amet mauris commodo. Sapien nec sagittis aliquam malesuada bibendum
arcu vitae. Elementum pulvinar etiam non quam lacus suspendisse. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Dictum non consectetur a erat nam at lectus urna. Bibendum ut tristique et egestas quis ipsum. Vitae semper
quis lectus nulla at volutpat diam ut. Viverra accumsan in nisl nisi.
If you need to detect any user interaction, then all you need to do is add event listeners for the mousemove
, keydown
, click
, and touchstart
. In that event listener, all you need to do is call clearInterval()
and pass the value returned from the setInterval()
call. Like this:
let currentpos = 0,
alt = 1,
curpos1 = 0,
curpos2 = -1;
function scrollwindow() {
if (document.all)
temp = document.body.scrollTop
else
temp = window.pageYOffset
if (alt == 0)
alt = 1
else
alt = 0
if (alt == 0)
curpos1 = temp
else
curpos2 = temp
if (curpos1 != curpos2) {
if (document.all)
currentpos = document.body.scrollTop + 1
else
currentpos = window.pageYOffset + 1
window.scroll(0, currentpos)
} else {
currentpos = 0
window.scroll(0, currentpos)
}
}
function startit() {
let interval = setInterval("scrollwindow()", 10);
const stop = () => clearInterval(interval);
window.addEventListener('mousemove', stop);
window.addEventListener('keydown', stop);
window.addEventListener('click', stop);
window.addEventListener('touchstart', stop);
}
window.onload = startit;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat interdum varius sit amet mattis vulputate enim nulla. A erat nam at lectus urna duis convallis. Eget nunc lobortis mattis
aliquam faucibus purus. Sollicitudin ac orci phasellus egestas tellus rutrum. Tristique magna sit amet purus gravida quis blandit. Morbi non arcu risus quis varius. Dictumst vestibulum rhoncus est pellentesque elit. Euismod nisi porta lorem mollis aliquam
ut porttitor. Curabitur gravida arcu ac tortor dignissim convallis aenean. Quis blandit turpis cursus in hac habitasse platea dictumst. Nibh praesent tristique magna sit amet. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Arcu cursus
vitae congue mauris rhoncus aenean vel elit. Ac turpis egestas integer eget aliquet nibh. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Varius morbi enim nunc faucibus a pellentesque. Eu consequat ac felis donec et odio pellentesque.
Aliquet risus feugiat in ante metus dictum at tempor commodo. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Tristique risus nec feugiat in fermentum posuere urna nec. Nulla aliquet enim tortor at auctor. Sed felis eget velit
aliquet sagittis id consectetur. Viverra suspendisse potenti nullam ac tortor. Ultrices dui sapien eget mi. Ornare suspendisse sed nisi lacus sed viverra. Faucibus vitae aliquet nec ullamcorper sit. Sodales ut etiam sit amet nisl purus. Dictum non consectetur
a erat nam at lectus. Ipsum faucibus vitae aliquet nec. Id leo in vitae turpis massa sed. Felis eget nunc lobortis mattis aliquam. Vitae tempus quam pellentesque nec nam aliquam. Eget magna fermentum iaculis eu non diam. Adipiscing elit duis tristique
sollicitudin nibh sit. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Euismod lacinia at quis risus sed vulputate odio ut. Bibendum neque egestas
congue quisque. Cras ornare arcu dui vivamus. Eget aliquet nibh praesent tristique. Lectus magna fringilla urna porttitor. Venenatis tellus in metus vulputate eu. Elit sed vulputate mi sit amet mauris commodo. Sapien nec sagittis aliquam malesuada bibendum
arcu vitae. Elementum pulvinar etiam non quam lacus suspendisse. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Dictum non consectetur a erat nam at lectus urna. Bibendum ut tristique et egestas quis ipsum. Vitae semper
quis lectus nulla at volutpat diam ut. Viverra accumsan in nisl nisi.