Determine the direction of the scroll in an element

Navigation
7

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>
    
asked by anonymous 02.04.2015 / 19:22

2 answers

4

The code works fine and I do not see how to optimize it if the goal is to detect the direction of the bearing at every step (that is, in every scroll event, which is fired multiple times while the content is rolled).

But you can optimize if the goal is to sense the "resulting" direction of the bearing - when what matters is whether at the end of the bearing the contents are up or down rather than at the beginning, ignoring the intermediate steps you scroll quickly up and down the process several times). In this case, you can use a timer to do throttling : 

var lastScrollTop = 0,
    element = document.body,
    timer,
    intervalo = 500;

/**
 * Retorna:
 * -1 para rolamento acima
 * 1 para rolamento abaixo
 * 0 para nenhum rolamento
 */
function sentido() {
  var scrollAmt = element.scrollTop;
  var sinal = 0;
  if (scrollAmt > lastScrollTop) {
    sinal = 1;
  }
  else if (scrollAmt < lastScrollTop) {
    sinal = -1;
  }
  lastScrollTop = scrollAmt;
  return sinal;
}

// Listener
element.onscroll = function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    document.getElementById('status').innerHTML = 'Sentido do rolamento: ' + sentido();
  }, intervalo);

};
#status {
  position: fixed;
  top: 0;
  width: 100%;
  height: 12px;
  padding: 6px;
  background: #ccc;
}
<div id="status"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere purus vel nisi condimentum efficitur. Donec at velit aliquet, pretium ex eget, ornare dolor. Quisque eu condimentum felis. Nulla facilisi. Cras rutrum nibh id erat vestibulum, vitae ornare tellus rutrum. Nam mauris orci, pulvinar convallis euismod interdum, pretium id purus. Pellentesque nulla felis, auctor ac neque condimentum, scelerisque accumsan ex. Morbi dignissim felis id rutrum dictum. Aliquam metus arcu, euismod at tempor at, dictum a massa. Sed fringilla augue justo, in porttitor magna iaculis nec. Phasellus ornare enim varius arcu molestie, vitae ultrices nunc laoreet. Phasellus hendrerit porttitor diam, at efficitur arcu viverra venenatis. Curabitur congue leo lectus, id mattis lacus aliquet a. Integer efficitur augue quis nibh posuere suscipit. Vestibulum facilisis nulla libero. Proin vitae diam non augue iaculis suscipit id id lorem.</p>
<p>Integer maximus, dui id tempor rutrum, tellus urna gravida lacus, quis eleifend massa leo ac sem. Vivamus congue sagittis lectus eu pellentesque. Duis blandit non odio vitae pharetra. Donec sem massa, tempor vitae mattis vel, accumsan ut ex. Integer consequat, nibh non ultrices dapibus, erat ligula mollis lorem, sit amet placerat lorem tellus quis eros. Duis id justo euismod mauris pharetra condimentum. Aenean a diam sit amet velit fringilla tempus ac in libero. Nulla elementum interdum nisl sit amet convallis. In hac habitasse platea dictumst. Nullam accumsan leo ut nulla varius pretium. Aenean iaculis facilisis ultricies.</p>
<p>Vivamus pharetra mi in dui pulvinar rhoncus. Proin rhoncus purus ac risus egestas hendrerit. Nulla facilisi. Proin leo lacus, rhoncus vitae diam vitae, hendrerit pretium lacus. Nullam dictum porttitor ex, rutrum ornare velit aliquam eu. Nullam sagittis sed lectus nec ultricies. Sed porta, leo sed consectetur dapibus, ligula velit blandit elit, in gravida dolor enim nec sem. Nullam pharetra vel tortor sit amet efficitur. Aliquam erat volutpat.</p>
<p>Sed quis nibh odio. Phasellus cursus ullamcorper lobortis. Aliquam in maximus dolor. Fusce tincidunt ornare lacus in suscipit. Nam id augue tempus, suscipit purus at, rutrum felis. Nam suscipit massa ac interdum sodales. Suspendisse semper arcu et velit iaculis, id gravida lacus rhoncus. Curabitur a diam non nisl lobortis dictum quis eu elit. Nullam lorem risus, viverra at erat nec, mollis scelerisque eros. Nunc malesuada efficitur neque, rhoncus ultrices nisl dapibus ut. In ultricies nec sapien id viverra. Nullam at sem ullamcorper, maximus libero id, imperdiet ante. Donec aliquam, enim nec venenatis pellentesque, nunc erat molestie risus, ac aliquet libero justo eu orci. Integer tincidunt consequat turpis, a pharetra magna condimentum vel. Etiam suscipit magna vel feugiat vestibulum.</p>
<p>Mauris fermentum blandit neque, sit amet dignissim turpis dictum vitae. Curabitur congue augue sit amet felis consectetur maximus. Maecenas sit amet justo vitae urna aliquet tristique. Maecenas in neque facilisis, dapibus turpis at, interdum lectus. Praesent commodo ante eros, lobortis elementum mauris consequat eu. Fusce convallis nunc sed augue malesuada gravida. Sed dignissim velit in nibh porttitor consequat. Proin at tortor porta, pretium nisl at, pellentesque turpis.</p>
<p>Phasellus ornare eget augue in consequat. Ut in rutrum ante. Vivamus interdum mi sapien, ac commodo sapien sollicitudin eget. Suspendisse lacinia, massa vel lacinia vulputate, justo est commodo dolor, vel sodales lacus velit quis tortor. Nulla facilisi. Duis vehicula quis dui at varius. Integer ultrices tempor dolor. Vestibulum nec arcu ut ligula semper fringilla ut ut lorem. Nam et dapibus sapien. Nullam pharetra egestas ante, nec congue risus elementum non. Integer aliquet dolor sit amet metus ultrices, quis eleifend sapien dictum. In euismod, mi et congue ullamcorper, libero mi rhoncus tortor, in laoreet libero tellus dictum dui. Mauris suscipit convallis nibh, et ullamcorper turpis sollicitudin vel. Nullam tincidunt dolor ut mauris fermentum, ac tempus mi lobortis. Vivamus quis justo sagittis, tempor ex nec, volutpat orci. Nullam consectetur volutpat euismod.</p>
<p>Aliquam et ipsum non eros mollis dapibus nec sit amet sapien. Pellentesque eleifend et nisi non interdum. Maecenas aliquet dolor vel malesuada egestas. Pellentesque at purus mauris. Quisque nulla tellus, egestas in iaculis at, sollicitudin nec est. Donec turpis enim, condimentum nec tincidunt eu, ultrices ac tellus. Aliquam massa urna, ultrices ut pulvinar nec, iaculis vel purus. Maecenas blandit elit mi, eget posuere odio faucibus et. Integer sit amet lacus tortor. Suspendisse et quam tempor, rhoncus diam eget, tincidunt nisl. Morbi pharetra gravida tellus, ut facilisis sem aliquam a.</p>
<p>Aenean eu vehicula erat. Donec sed sagittis lacus. Sed ac mi felis. Proin elit lorem, laoreet a fringilla sit amet, pulvinar vitae ligula. Nullam et mi quis magna lacinia maximus eget vitae purus. Duis semper fringilla sapien ornare bibendum. In ultricies dignissim dui vitae porta. Maecenas a erat ante. Phasellus viverra orci a metus sagittis accumsan. Curabitur condimentum purus eget congue molestie. Mauris quis mattis lectus. Quisque non volutpat orci. Sed eget lacus vehicula, mattis ante id, porttitor odio.</p>
<p>Nullam id posuere est, nec vestibulum sapien. Nunc consequat lacus at mi pharetra, quis vehicula quam ornare. Vivamus a odio enim. Mauris vitae mauris quis quam volutpat consequat ullamcorper vel elit. Morbi consectetur egestas justo. Curabitur odio leo, ultrices a semper ac, interdum nec enim. Nullam pellentesque viverra sagittis. Nunc vel orci viverra, luctus turpis vitae, condimentum libero.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque commodo eget sapien sit amet imperdiet. Ut ultricies risus a augue suscipit, non semper mauris convallis. Aenean consectetur convallis ligula, facilisis tempor lorem iaculis at. Integer et velit facilisis, faucibus dolor ut, posuere magna. Maecenas tristique ornare ante, sit amet commodo sem lobortis sit amet. Mauris convallis varius felis, at tempor massa tempor a. Cras fringilla laoreet sem eget ullamcorper. Ut feugiat justo tincidunt, dictum elit sit amet, blandit sapien. Aenean sed viverra tortor. Ut at nisl et urna imperdiet maximus eu nec nisl. Cras dapibus dui ut fringilla semper. Aenean cursus metus placerat diam congue, semper vestibulum eros egestas. Suspendisse eget tortor a dui luctus elementum et sed est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec lacus eu nunc sodales rutrum.</p>
<p>Vestibulum ullamcorper, ex pharetra auctor convallis, quam quam pellentesque dolor, condimentum suscipit mauris nulla vitae nunc. Suspendisse auctor dolor eget justo tempus, vel blandit purus accumsan. Aliquam metus lacus, fermentum vel faucibus non, rutrum pretium velit. Mauris sit amet consectetur justo. Nunc accumsan suscipit mi, sed maximus diam posuere sit amet. Donec ultrices tristique neque, sed consequat lorem convallis eu. Aenean viverra eu ex non tempor. Nullam in luctus eros. Curabitur eget arcu efficitur, convallis leo quis, sollicitudin velit. Pellentesque vulputate augue ac diam posuere fringilla. Nulla cursus eros at purus mollis porttitor. Quisque tincidunt nisi ut aliquet pretium.</p>
<p>Fusce in metus erat. Mauris tincidunt urna lacus. Suspendisse vehicula, nunc in malesuada malesuada, felis augue gravida ex, sed gravida elit arcu ac neque. Pellentesque in fringilla tellus. Donec hendrerit vitae quam at suscipit. Pellentesque fermentum, velit eget pretium lobortis, sem lacus vehicula tortor, ut finibus felis ante sed justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec laoreet libero ac lacinia eleifend. Pellentesque non metus accumsan, lobortis enim eu, vestibulum nisl. Pellentesque a eros augue. Curabitur sed consequat leo. Mauris ac lectus augue. Duis ultricies risus quis venenatis egestas. Quisque non fringilla justo.</p>
<p>Nulla urna purus, elementum et justo in, rutrum mollis lacus. Donec aliquam tempor ligula vel elementum. Sed finibus mattis velit a bibendum. Donec nec urna sodales, consequat odio a, vestibulum dolor. Phasellus sollicitudin viverra pulvinar. Fusce pellentesque mattis viverra. Phasellus augue ante, tincidunt vitae commodo eu, egestas sit amet tortor. Pellentesque vel magna eu elit blandit iaculis. Aliquam consequat condimentum sapien, et accumsan ligula mattis sed. Vivamus dignissim turpis tellus. Aliquam interdum accumsan sapien, eget euismod tortor volutpat nec. Maecenas luctus sollicitudin lacinia.</p>
<p>In ligula ipsum, interdum id quam non, dapibus bibendum est. Proin vel tincidunt purus, non pulvinar nibh. Nam congue libero ac eros fringilla, sed interdum risus viverra. Quisque id nisi ac lectus dapibus mattis nec imperdiet arcu. Vivamus quis interdum elit. Cras pellentesque, dui at mollis tincidunt, tortor nulla convallis nisl, in mattis purus sem eu nibh. Aenean congue arcu feugiat lectus mattis commodo. Vivamus tincidunt leo vel bibendum volutpat. Pellentesque eget mauris eget lacus blandit lobortis. Curabitur egestas urna nec mollis pretium. Etiam ac purus vel augue scelerisque posuere ut eu nibh. Ut tempor non nunc facilisis iaculis. Nullam dictum felis imperdiet, placerat magna eleifend, convallis mi. Praesent sit amet accumsan dui.</p>
<p>In at ipsum turpis. Aliquam non elit pulvinar, luctus eros a, tristique lorem. Praesent vitae elit neque. Vivamus molestie diam libero, id pellentesque dui feugiat at. Donec risus massa, fermentum ac ultricies quis, pulvinar et mi. Morbi fermentum velit vitae purus dignissim tempus. Sed eget ipsum interdum, venenatis dui a, convallis leo. Etiam accumsan libero nec ultrices ultricies. Curabitur vel sem neque. Nunc accumsan porta vestibulum. Nunc varius felis nec sodales bibendum. In eget arcu nec magna sagittis ultrices. Nam interdum lacinia sagittis. Donec blandit mauris nibh, a tincidunt libero suscipit ut.</p>
<p>Donec sed lacus efficitur, rhoncus dolor a, varius turpis. Maecenas efficitur vel justo nec hendrerit. Morbi quis mauris tristique enim tincidunt consequat. Morbi ut felis neque. Quisque eu sapien hendrerit, maximus turpis id, sollicitudin erat. Pellentesque a egestas sem, nec cursus mauris. Proin augue turpis, semper vel pulvinar in, luctus eget arcu. Mauris ullamcorper ultricies sollicitudin. Duis quis placerat odio. Pellentesque nec ullamcorper massa. Aenean sed euismod justo. Suspendisse potenti.</p>
<p>Praesent urna nisl, semper nec laoreet vitae, sodales sagittis nulla. Nam cursus purus eu sodales convallis. Praesent quis vulputate nulla, a vehicula nisi. Pellentesque consequat turpis eget imperdiet porta. Aenean est orci, tincidunt vel nibh vel, tempus iaculis ipsum. Donec vehicula tellus purus, et laoreet tellus pulvinar quis. Suspendisse potenti. Nullam tempus arcu vel luctus ultrices. Nulla semper, eros vitae placerat aliquam, metus arcu finibus tortor, at vulputate sapien augue sed nunc. Donec pulvinar, justo vel viverra porttitor, nisl magna mattis tortor, id venenatis dolor ex et diam.</p>
<p>Nunc dignissim posuere neque ut accumsan. Pellentesque laoreet sem eget accumsan lacinia. Pellentesque vel nisi tincidunt, venenatis odio ac, feugiat nulla. Praesent maximus dui quis odio eleifend, eget elementum est tincidunt. Vestibulum at tempus sem, vel cursus lacus. Sed facilisis efficitur odio, in ultrices purus vehicula ut. Praesent commodo pretium congue. Curabitur non magna in turpis interdum mattis. Pellentesque porttitor, lacus venenatis egestas iaculis, turpis est condimentum dolor, eget maximus est ligula sed velit. Aenean neque velit, malesuada sed dictum sed, auctor facilisis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ac leo nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget ullamcorper ipsum. Etiam dapibus nisl ac malesuada pellentesque.</p>

Note: I removed the control variable from the code that was not being used.

    
02.04.2015 / 20:01
3

If you do not need to know if it is stopped then you can optimize by removing the last else and leave only: 

  if (scrollAmt > lastScrollTop) {
    // baixo
  }
  else if (scrollAmt < lastScrollTop) {
    // cima
  }

And my answer ends here.

If you need the "stopped" functionality continue reading:)

The "stopped" feature does not work when you listen for the scroll event because the event is not triggered any more from the time the scroll has reached the end. I suggest adding listening to events that generate scroll. I made an example with mouse wheel which shows the status "stopped" when the scroll has reached the end. You could even use the direction of the mousewheel to know the direction, but figuring out the difference of scroll seems to me well.

To find out which mouse wheel event you can listen to, you can use this feature detect : 

evento = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';'

The code looks like this: 

var control = 0,
    lastScrollTop = 0,
    element = document.getElementById('rolagemAqui'),
    feedback = document.getElementById('direcao'),
    evento = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';

function tratarScroll() {
    var scrollAmt = element.scrollTop;
    if (scrollAmt > lastScrollTop) {
        feedback.innerHTML = "baixo";
    } else if (scrollAmt < lastScrollTop) {
        feedback.innerHTML = "cima";
    } else {
        feedback.innerHTML = "parado";
    }

    lastScrollTop = scrollAmt;
};

element.addEventListener(evento, tratarScroll);
element.addEventListener('scroll', tratarScroll);

jsFiddle: link

You can add to this the functionality of knowing if the native scroll bar has reached the end. For this you have to make an artificial scrollbar because the native bar does not trigger events to know if you are dragging in the same place.

In this case you could add a few more lines that would also work for when scrolling is started by a selection of text that forces a scroll. An example of this (without the custom scrollbar) would be like this .

    
02.04.2015 / 20:25
Mapping Code First with Data Annotations Difference between Library and Helper