title: How to debounce or throttle scroll events in iOS devices ( Safari )
body: <p>I`m trying to implement infinity scroll dropdown for mobile and desktop devices. Under "infinity scroll", I mean the following - if you have 100 records, when reach the end of the scrollable container, 20 new records will be loaded and the first 20 records will hide ( same for the backward direction ) </p>
  
  <p>I have encountered the following problems: </p>
  
  <p>Everything works perfectly in mobile Android Chrome browsers + desktop browsers except the Safari Mobile browser ( iPhone, iPad, etc.)  </p>
  
  <p>I have tried the following solutions: </p>
  
  <ul>
  <li><p>Added lodash debounce/throttle function to the whole scroll handler function which didn't help, even broke the scroll everywhere </p></li>
  <li><p>I tried to use iScroll but encountered the same issue as here + additional bugs from iscroll scrollTo() method.</p></li>
  <li><p>requestAnimationFrame() - without any success.</p></li>
  </ul>
  
  <p>Here is my example project: 
  <a href="https://jsfiddle.net/q4nLverg/2/" rel="nofollow noreferrer">https://jsfiddle.net/q4nLverg/2/</a></p>
  
  <p>The scroll Handler function code :</p>
  
  <pre><code>function scrollHandler(e) {
  
      var top = $(this.$refs.dropdownContainer).scrollTop();
      var difference = $(this.$refs.dropdownMenu).height() - $(this.$refs.dropdownContainer).height()
  
      if (top &gt;= difference - this.scrollLimit &amp;&amp; difference &gt; 0) {
  
          this.maxRowsLimitIndex = this.maxRowsLimitIndex + this.numberOfItemsToLoad;
          this.minRowsLimitIndex = this.minRowsLimitIndex + this.numberOfItemsToLoad
  
          if ( this.maxRowsLimitIndex &gt;= this.options.length ) {
  
              this.maxRowsLimitIndex = this.options.length
              this.minRowsLimitIndex = this.options.length - this.numberOfVisibleItems
          }
          else {
              this.scrollTo( (difference - (this.numberOfItemsToLoad * 28)) )
          }
      }
      else if ( top &lt;= this.scrollLimit )
      {
          this.maxRowsLimitIndex = this.maxRowsLimitIndex - this.numberOfItemsToLoad;
          this.minRowsLimitIndex = this.minRowsLimitIndex - this.numberOfItemsToLoad
  
          if ( this.maxRowsLimitIndex &lt;= this.numberOfVisibleItems  ) {
              this.maxRowsLimitIndex = this.numberOfVisibleItems
              this.minRowsLimitIndex = 0
          }
          else {
              this.scrollTo( (this.numberOfItemsToLoad * 28)/2)
          }
  
      }
  }
  </code></pre>
  
  <p>this.scrollTo - just changes the scrollTop of the container to simulate auto scroll up or down when the new data is loaded and the old one is removed from the select </p>
  
  <p>The expected results in iOS devices ( and any other ): </p>
  
  <p>When the user scrolls fast to the end of the scrollable container it shouldn`t go to the end of the scrollable container, but it must continue the scroll event and load the data consequently ( just like how it works in android device ) to simulate infinity scroll functionality. </p>