Scroll event listener javascript

Question

Is there a js listener for when a user scrolls in a certain textbox that can be used  Kinda like onclick except for scrolling  I saw HTML5 event listener for number input scroll - Chrome only but that seems to be for chrome only  I m looking for something cross-browser

User · Answer

I was looking a lot to find a solution for sticy menue with old school JS  without JQuery   So I build small test to play with it  I think it can be helpfull to those looking for solution in js  It needs improvments of unsticking the menue back  and making it more smooth  Also I find a nice solution with JQuery that clones the original div instead of position fixed  its better since the rest of page element dont need to be replaced after fixing  Anyone know how to that with JS   Please remark  correct and improve    lt  DOCTYPE html gt   lt html gt    lt head gt   lt script gt      addEvent function by John Resig     http   ejohn org projects flexible-javascript-events   function addEvent  obj  type  fn          if   obj attachEvent              obj  e  type fn    fn          obj type fn    function   obj  e  type fn   window event              obj attachEvent   on  type  obj type fn           else           obj addEventListener  type  fn  false            function getScrollY         var  scrOfY   0      if  typeof  window pageYOffset       number                Netscape compliant         scrOfY   window pageYOffset         else if  document body  amp  amp  document body scrollTop                DOM compliant         scrOfY   document body scrollTop             return scrOfY     lt  script gt   lt style gt   mydiv       height 100px      width 100      fdiv       height 100px      width 100      lt  style gt   lt  head gt    lt body gt    lt  -- HTML for example event goes here -- gt    lt div id  fdiv  style  background-color red position fix  gt   lt  div gt   lt div id  mydiv  style  background-color yellow  gt   lt  div gt   lt div id  fdiv  style  background-color green  gt   lt  div gt    lt script gt      Script for example event goes here  addEvent window   scroll   function event         var x   document getElementById  mydiv         var y   getScrollY              if  y  gt   100            x style position    fixed            x style top   0                lt  script gt   lt  body gt   lt  html gt

User · Answer

For those who found this question hoping to find an answer that doesn t involve jQuery  you hook into the window  scroll  event using normal event listening  Say we want to add scroll listening to a number of CSS-selector-able elements      what should we do when scrolling occurs var runOnScroll    function evt         not the most exciting thing  but a thing nonetheless   console log evt target          grab elements as array  rather than as NodeList var elements   document querySelectorAll         elements   Array prototype slice call elements       and then make each element do something on scroll elements forEach function element      window addEventListener  scroll   runOnScroll   passive  true           Using the passive attribute to tell the browser that this event won t interfere with scrolling itself   For bonus points  you can give the scroll handler a lock mechanism so that it doesn t run if we re already scrolling      global lock  so put this code in a closure of some sort so you re not polluting  var locked   false  var lastCall   false   var runOnScroll    function evt      if locked  return     if  lastCall  clearTimeout lastCall     lastCall   setTimeout      gt        runOnScroll evt          you do this because you want to handle the last        scroll event  even if it occurred while another        event was being processed       200            your code goes here       locked   false

User · Answer

Wont the below basic approach doesn t suffice your requirements   HTML Code having a div   lt div id  mydiv  onscroll  myMethod     gt     JS will have below code  function myMethod    alert 1

User · Answer

Is there a js listener for when a user scrolls in a certain textbox that can be used    DOM L3 UI Events spec gave the initial definition but is considered obsolete   To add a single handler you can do     let isTicking    const debounce    callback  evt    gt        if  isTicking  return      requestAnimationFrame      gt          callback evt         isTicking   false              isTicking   true         const handleScroll   evt   gt  console log evt  window scrollX  window scrollY     document defaultView onscroll   evt   gt  debounce handleScroll  evt     For multiple handlers or  if preferable for style reasons  you may use addEventListener as opposed to assigning your handler to onscroll as shown above   If using something like   debounce from lodash you could probably get away with   const handleScroll   evt   gt  console log evt  window scrollX  window scrollY   document defaultView onscroll   evt   gt    debounce      gt  handleScroll evt      Review browser compatibility and be sure to test on some actual devices before calling it done

[javascript] Scroll event listener javascript

Examples related to javascript