The code below aims to detect the direction of scrolling in a specific element:
var control = 0,
lastScrollTop = 0,
element = document.getElementById('idDoElemento');
element.onscroll = function() {
var scrollAmt = element.scrollTop;
if (scrollAmt > lastScrollTop) {
// baixo
}
else if (scrollAmt < lastScrollTop) {
// cima
}
else {
// parado
}
lastScrollTop = scrollAmt;
};
By the direction of the scroll, we can for example trigger an action.
Question
For what has been described, is the process running efficiently or can it be simplified?
var control = 0,
lastScrollTop = 0,
element = document.getElementById('rolagemAqui'),
feedback = document.getElementById('direcao');
element.onscroll = function() {
var scrollAmt = element.scrollTop;
if (scrollAmt > lastScrollTop) {
feedback.innerHTML = "baixo";
}
else if (scrollAmt < lastScrollTop) {
feedback.innerHTML = "cima";
}
else {
feedback.innerHTML = "parado";
}
lastScrollTop = scrollAmt;
};
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#rolagemAqui {
overflow: scroll;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
#direcao {
position: absolute;
z-index:1;
left: 48%;
top: 0;
background-color: pink;
padding: 6px;
}
<p id="direcao">parado</p>
<div id="rolagemAqui">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam, velit nec laoreet lacinia, erat risus aliquet sapien, vel maximus dui nunc ut justo. Aliquam dictum mauris non metus sagittis consectetur. Proin molestie sem vel lorem convallis, sed blandit ipsum rhoncus. Phasellus molestie risus nec auctor eleifend. Nulla ultrices eu tortor at euismod. Integer ut facilisis enim. Donec pulvinar laoreet rutrum. Mauris tincidunt, massa vitae molestie efficitur, sem nulla imperdiet justo, in sagittis enim elit consequat ex. Duis imperdiet libero ut maximus ornare. Maecenas vestibulum massa vel suscipit aliquam. Etiam sed orci vestibulum, faucibus orci a, fringilla mi. Etiam sit amet augue eget est luctus consectetur vitae aliquet sem. Donec venenatis porttitor rutrum. Proin hendrerit urna velit, nec scelerisque sem consectetur et. Sed ultricies risus at tortor euismod, id sodales sapien tristique. Ut vel bibendum nisi. Donec et tempus est. Phasellus efficitur imperdiet nibh, quis faucibus sem dapibus quis.
Pellentesque sed justo ut nulla fringilla consectetur. Nullam sed tempor nisi, quis vehicula turpis. Sed malesuada purus risus, nec pellentesque velit fringilla in. Sed sed risus et quam sagittis tincidunt in at nulla. Pellentesque vitae semper mi, sed bibendum mauris. Maecenas feugiat leo eu ipsum vehicula, at accumsan nisi ultricies. Nulla felis leo, eleifend in elit ut, egestas viverra lorem. Vivamus vel libero vitae lectus blandit porttitor quis a ante. In efficitur iaculis lorem, eget faucibus nulla ornare nec. Maecenas vestibulum, eros non tempus pretium, neque leo facilisis ante, vitae bibendum velit ligula vitae tortor. Donec euismod magna magna, sed iaculis ante fermentum ac. In elementum leo turpis, id viverra est ultrices nec.
Nam non risus finibus justo ornare porta. Integer bibendum ex in velit placerat, id iaculis leo eleifend. Etiam ornare scelerisque eros eu bibendum. Sed luctus massa et nunc semper gravida. Fusce id ornare velit. Cras porttitor sed risus vitae gravida.
Nam sit amet odio sed leo tincidunt cursus id et mauris. Vestibulum vitae euismod ex, eu elementum lacus. Nunc non lacus pellentesque, feugiat enim luctus, congue velit. Donec lorem ex, semper in erat ac, sollicitudin pulvinar lorem. Integer quis interdum enim, ut faucibus nisl. Aenean sit amet orci euismod lacus ullamcorper vestibulum. Aenean eu lacus arcu. Praesent bibendum est quis neque sagittis, ac egestas eros mattis. Sed consequat vulputate nulla, nec varius nulla laoreet sed. Sed magna mauris,
faucibus quis scelerisque ac, volutpat a velit. Etiam eu nibh eget dui malesuada convallis. Aliquam aliquet nisi sed ligula blandit cursus. Etiam quis velit nec orci luctus faucibus. Aliquam hendrerit varius sodales. Nulla a neque lorem. Vestibulum
non nibh neque. Praesent at arcu ac orci molestie ultrices vel vitae quam. Praesent quis ligula sed magna maximus eleifend. Donec nec enim accumsan, viverra orci dapibus, fermentum metus. Aliquam rhoncus erat ut tortor laoreet congue at in felis. In
eget erat vel justo ornare dignissim. Nunc tincidunt magna felis, vel maximus nibh pharetra eget. Phasellus tempor interdum arcu ac scelerisque. Mauris semper, magna in ultricies dapibus, neque risus imperdiet lorem, a maximus massa nisl volutpat sem.
Duis ipsum velit, cursus vel quam eu, tincidunt hendrerit erat. Nulla eleifend, urna nec cursus maximus, lectus diam auctor mi, id posuere metus odio ut dui. Morbi auctor sagittis augue eu dapibus. Aenean eu metus elementum ante ullamcorper malesuada.
Nunc blandit nec augue eu sollicitudin. Integer vitae scelerisque urna, id gravida sem. Aliquam ultricies dui vitae libero consectetur, quis varius nisl dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam, velit nec laoreet lacinia, erat risus aliquet sapien, vel maximus dui nunc ut justo. Aliquam dictum mauris non metus sagittis consectetur. Proin molestie sem vel lorem convallis, sed
blandit ipsum rhoncus. Phasellus molestie risus nec auctor eleifend. Nulla ultrices eu tortor at euismod. Integer ut facilisis enim. Donec pulvinar laoreet rutrum. Mauris tincidunt, massa vitae molestie efficitur, sem nulla imperdiet justo, in sagittis
enim elit consequat ex. Duis imperdiet libero ut maximus ornare. Maecenas vestibulum massa vel suscipit aliquam. Etiam sed orci vestibulum, faucibus orci a, fringilla mi. Etiam sit amet augue eget est luctus consectetur vitae aliquet sem. Donec venenatis
porttitor rutrum. Proin hendrerit urna velit, nec scelerisque sem consectetur et. Sed ultricies risus at tortor euismod, id sodales sapien tristique. Ut vel bibendum nisi. Donec et tempus est. Phasellus efficitur imperdiet nibh, quis faucibus sem dapibus
quis. Pellentesque sed justo ut nulla fringilla consectetur. Nullam sed tempor nisi, quis vehicula turpis. Sed malesuada purus risus, nec pellentesque velit fringilla in. Sed sed risus et quam sagittis tincidunt in at nulla. Pellentesque vitae semper
mi, sed bibendum mauris. Maecenas feugiat leo eu ipsum vehicula, at accumsan nisi ultricies. Nulla felis leo, eleifend in elit ut, egestas viverra lorem. Vivamus vel libero vitae lectus blandit porttitor quis a ante. In efficitur iaculis lorem, eget
faucibus nulla ornare nec. Maecenas vestibulum, eros non tempus pretium, neque leo facilisis ante, vitae bibendum velit ligula vitae tortor. Donec euismod magna magna, sed iaculis ante fermentum ac. In elementum leo turpis, id viverra est ultrices nec.
Nam non risus finibus justo ornare porta. Integer bibendum ex in velit placerat, id iaculis leo eleifend. Etiam ornare scelerisque eros eu bibendum. Sed luctus massa et nunc semper gravida. Fusce id ornare velit. Cras porttitor sed risus vitae gravida.
Nam sit amet odio sed leo tincidunt cursus id et mauris. Vestibulum vitae euismod ex, eu elementum lacus. Nunc non lacus pellentesque, feugiat enim luctus, congue velit. Donec lorem ex, semper in erat ac, sollicitudin pulvinar lorem. Integer quis interdum
enim, ut faucibus nisl. Aenean sit amet orci euismod lacus ullamcorper vestibulum. Aenean eu lacus arcu. Praesent bibendum est quis neque sagittis, ac egestas eros mattis. Sed consequat vulputate nulla, nec varius nulla laoreet sed. Sed magna mauris,
faucibus quis scelerisque ac, volutpat a velit. Etiam eu nibh eget dui malesuada convallis. Aliquam aliquet nisi sed ligula blandit cursus. Etiam quis velit nec orci luctus faucibus. Aliquam hendrerit varius sodales. Nulla a neque lorem. Vestibulum
non nibh neque. Praesent at arcu ac orci molestie ultrices vel vitae quam. Praesent quis ligula sed magna maximus eleifend. Donec nec enim accumsan, viverra orci dapibus, fermentum metus. Aliquam rhoncus erat ut tortor laoreet congue at in felis. In
eget erat vel justo ornare dignissim. Nunc tincidunt magna felis, vel maximus nibh pharetra eget. Phasellus tempor interdum arcu ac scelerisque. Mauris semper, magna in ultricies dapibus, neque risus imperdiet lorem, a maximus massa nisl volutpat sem.
Duis ipsum velit, cursus vel quam eu, tincidunt hendrerit erat. Nulla eleifend, urna nec cursus maximus, lectus diam auctor mi, id posuere metus odio ut dui. Morbi auctor sagittis augue eu dapibus. Aenean eu metus elementum ante ullamcorper malesuada.
Nunc blandit nec augue eu sollicitudin. Integer vitae scelerisque urna, id gravida sem. Aliquam ultricies dui vitae libero consectetur, quis varius nisl dictum.
</div>