滚动事件仅在滚动完成后才会触发

Question

所以，我在Android上的Chrome Mobile上遇到滚动事件的问题。此代码在桌面上运行正常。另外，我的手机上有this jsfiddle works和this one also works。这真的很奇怪。

当它正常工作时，它会在滚动时更新日历的月份和年份。但是，当它不起作用时，它只会在滚动完成后更新。我无法弄明白为什么！

我尝试过更改css样式，看上面有些内容或#content元素。

以下是代码的实时演示：http://ts3.dfagaming.org:4567/calendar

在Dolphin Browser上它有用（快速滚动时不起作用）。在Firefox mobile上，它可以完全运行。它在Opera Mobile上不起作用。

桌面版Chrome中的“设备模式和移动仿真”（正如预期的那样）或桌面版的Firefox中不会出现这种情况。

我有这个Javascript代码：

$("#cal-days-container").scroll(whenScroll);

function whenScroll(e){
  var x;
  for(x in dayArray){
    if(dayArray.hasOwnProperty(x)){
      for(var i=0; i<dayArray[x].length; i++){
        var nextYear = x;
        var nextMonth = i+1;
        if(nextMonth - 12 >= 0){
          nextMonth = nextMonth-12;
          nextYear++;
        }
        if(dayArray[x] &&
          dayArray[x][i] &&
          dayArray[nextYear] &&
          dayArray[nextYear][nextMonth] &&
          visible(dayArray[x][i][0], true) &&
          visible(dayArray[nextYear][nextMonth][0], true)){

          $("#cal-month").html(d.month[i]);
          $("#cal-month-select").val(i);
          $("#cal-year-select").val(x);

          // moving to static option with renderCalendar
          //$(".this-month").removeClass("this-month");

          //$($.map(dayArray[x][i], toDo)).addClass("this-month");

          nextMonth+=6;
          if(nextMonth - 12 >= 0){
            nextMonth -= 12;
            nextYear++;
          }

          if(!Array.isArray(dayArray[nextYear]) || !Array.isArray(dayArray[nextYear][nextMonth])){
            //console.log("got here");
            renderCalendar(new Date(nextYear, nextMonth, 0));
          }

          var prevMonth = i-6;
          var prevYear = x;
          if(prevMonth < 0){
            prevMonth += 12;
            prevYear--;
          }

          if(!Array.isArray(dayArray[prevYear]) || !Array.isArray(dayArray[prevYear][prevMonth])){
            //console.log("got there");
            renderCalendar(new Date(prevYear, prevMonth, 0));
            dayArray[x][i][0][0].scrollIntoView();
          }

          break;
        }
      }
    }
  }
}

这个css：

#cal-days-container {
  overflow-y: scroll;
  width: 100%;
  position: absolute;
  top: 72px;
  bottom: 0;
  left: 0;
  right: 0;
}

和这个html：

<div id="cal-days-container">
  <table id="cal-days"><tbody>
    <tr>
      <td class="dark-month"><span class="day-number">29</span></td>

      <td class="dark-month"><span class="day-number">30</span></td>

      <td class="dark-month"><span class="day-number">31</span></td>

      <td><span class="day-number">1</span></td>

      <td><span class="day-number">2</span></td>

      <td><span class="day-number">3</span></td>

      <td><span class="day-number">4</span></td>
    </tr>

    <tr>
      <td><span class="day-number">5</span></td>

      <td><span class="day-number">6</span></td>

      <td><span class="day-number">7</span></td>

      <td><span class="day-number">8</span></td>

      <td><span class="day-number">9</span></td>

      <td><span class="day-number">10</span></td>

      <td><span class="day-number">11</span></td>
    </tr>

    <tr>
      <td><span class="day-number">12</span></td>

      <td><span class="day-number">13</span></td>

      <td><span class="day-number">14</span></td>

      <td><span class="day-number">15</span></td>

      <td><span class="day-number">16</span></td>

      <td><span class="day-number">17</span></td>

      <td><span class="day-number">18</span></td>
    </tr>

    <tr>
      <td><span class="day-number">19</span></td>

      <td><span class="day-number">20</span></td>

      <td><span class="day-number">21</span></td>

      <td><span class="day-number">22</span></td>

      <td><span class="day-number">23</span></td>

      <td><span class="day-number">24</span></td>

      <td><span class="day-number">25</span></td>
    </tr>

    <tr>
      <td><span class="day-number">26</span></td>

      <td><span class="day-number">27</span></td>

      <td><span class="day-number">28</span></td>

      <td><span class="day-number">29</span></td>

      <td><span class="day-number">30</span></td>

      <td><span class="day-number">31</span></td>

      <td class=" dark-month"><span class="day-number">1</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">2</span></td>

      <td class=" dark-month"><span class="day-number">3</span></td>

      <td class=" dark-month"><span class="day-number">4</span></td>

      <td class=" dark-month"><span class="day-number">5</span></td>

      <td class=" dark-month"><span class="day-number">6</span></td>

      <td class=" dark-month"><span class="day-number">7</span></td>

      <td class=" dark-month"><span class="day-number">8</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">9</span></td>

      <td class=" dark-month"><span class="day-number">10</span></td>

      <td class=" dark-month"><span class="day-number">11</span></td>

      <td class=" dark-month"><span class="day-number">12</span></td>

      <td class=" dark-month"><span class="day-number">13</span></td>

      <td class=" dark-month"><span class="day-number">14</span></td>

      <td class=" dark-month"><span class="day-number">15</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">16</span></td>

      <td class=" dark-month"><span class="day-number">17</span></td>

      <td class=" dark-month"><span class="day-number">18</span></td>

      <td class=" dark-month"><span class="day-number">19</span></td>

      <td class=" dark-month"><span class="day-number">20</span></td>

      <td class=" dark-month"><span class="day-number">21</span></td>

      <td class=" dark-month"><span class="day-number">22</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">23</span></td>

      <td class=" dark-month"><span class="day-number">24</span></td>

      <td class=" dark-month"><span class="day-number">25</span></td>

      <td class=" dark-month"><span class="day-number">26</span></td>

      <td class=" dark-month"><span class="day-number">27</span></td>

      <td class=" dark-month"><span class="day-number">28</span></td>

      <td><span class="day-number">1</span></td>
    </tr>

    <tr>
      <td><span class="day-number">2</span></td>

      <td><span class="day-number">3</span></td>

      <td><span class="day-number">4</span></td>

      <td><span class="day-number">5</span></td>

      <td><span class="day-number">6</span></td>

      <td><span class="day-number">7</span></td>

      <td><span class="day-number">8</span></td>
    </tr>

    <tr>
      <td><span class="day-number">9</span></td>

      <td><span class="day-number">10</span></td>

      <td><span class="day-number">11</span></td>

      <td><span class="day-number">12</span></td>

      <td><span class="day-number">13</span></td>

      <td><span class="day-number">14</span></td>

      <td><span class="day-number">15</span></td>
    </tr>

    <tr>
      <td><span class="day-number">16</span></td>

      <td><span class="day-number">17</span></td>

      <td><span class="day-number">18</span></td>

      <td><span class="day-number">19</span></td>

      <td><span class="day-number">20</span></td>

      <td><span class="day-number">21</span></td>

      <td><span class="day-number">22</span></td>
    </tr>

    <tr>
      <td><span class="day-number">23</span></td>

      <td><span class="day-number">24</span></td>

      <td><span class="day-number">25</span></td>

      <td><span class="day-number">26</span></td>

      <td><span class="day-number">27</span></td>

      <td><span class="day-number">28</span></td>

      <td><span class="day-number">29</span></td>
    </tr>

    <tr>
      <td><span class="day-number">30</span></td>

      <td><span class="day-number">31</span></td>

      <td class=" dark-month"><span class="day-number">1</span></td>

      <td class=" dark-month"><span class="day-number">2</span></td>

      <td class=" dark-month"><span class="day-number">3</span></td>

      <td class=" dark-month"><span class="day-number">4</span></td>

      <td class=" dark-month"><span class="day-number">5</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">6</span></td>

      <td class=" dark-month"><span class="day-number">7</span></td>

      <td class=" dark-month"><span class="day-number">8</span></td>

      <td class=" dark-month"><span class="day-number">9</span></td>

      <td class=" dark-month"><span class="day-number">10</span></td>

      <td class=" dark-month"><span class="day-number">11</span></td>

      <td class=" dark-month"><span class="day-number">12</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">13</span></td>

      <td class=" dark-month"><span class="day-number">14</span></td>

      <td class=" dark-month"><span class="day-number">15</span></td>

      <td class=" dark-month"><span class="day-number">16</span></td>

      <td class=" dark-month"><span class="day-number">17</span></td>

      <td class=" dark-month"><span class="day-number">18</span></td>

      <td class=" dark-month"><span class="day-number">19</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">20</span></td>

      <td class=" dark-month"><span class="day-number">21</span></td>

      <td class=" dark-month"><span class="day-number">22</span></td>

      <td class=" dark-month"><span class="day-number">23</span></td>

      <td class=" dark-month"><span class="day-number">24</span></td>

      <td class=" dark-month"><span class="day-number">25</span></td>

      <td class=" dark-month"><span class="day-number">26</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">27</span></td>

      <td class=" dark-month"><span class="day-number">28</span></td>

      <td class=" dark-month"><span class="day-number">29</span></td>

      <td class=" dark-month"><span class="day-number">30</span></td>

      <td><span class="day-number">1</span></td>

      <td><span class="day-number">2</span></td>

      <td><span class="day-number">3</span></td>
    </tr>

    <tr>
      <td><span class="day-number">4</span></td>

      <td><span class="day-number">5</span></td>

      <td><span class="day-number">6</span></td>

      <td><span class="day-number">7</span></td>

      <td><span class="day-number">8</span></td>

      <td><span class="day-number">9</span></td>

      <td><span class="day-number">10</span></td>
    </tr>

    <tr>
      <td><span class="day-number">11</span></td>

      <td><span class="day-number">12</span></td>

      <td><span class="day-number">13</span></td>

      <td><span class="day-number">14</span></td>

      <td><span class="day-number">15</span></td>

      <td><span class="day-number">16</span></td>

      <td><span class="day-number">17</span></td>
    </tr>

    <tr>
      <td><span class="day-number">18</span></td>

      <td><span class="day-number">19</span></td>

      <td><span class="day-number">20</span></td>

      <td><span class="day-number">21</span></td>

      <td><span class="day-number">22</span></td>

      <td><span class="day-number">23</span></td>

      <td><span class="day-number">24</span></td>
    </tr>

    <tr>
      <td><span class="day-number">25</span></td>

      <td><span class="day-number">26</span></td>

      <td><span class="day-number">27</span></td>

      <td><span class="day-number">28</span></td>

      <td><span class="day-number">29</span></td>

      <td><span class="day-number">30</span></td>

      <td><span class="day-number">31</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">1</span></td>

      <td class=" dark-month"><span class="day-number">2</span></td>

      <td class=" dark-month"><span class="day-number">3</span></td>

      <td class=" dark-month"><span class="day-number">4</span></td>

      <td class=" dark-month"><span class="day-number">5</span></td>

      <td class=" dark-month"><span class="day-number">6</span></td>

      <td class=" dark-month"><span class="day-number">7</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">8</span></td>

      <td class=" dark-month"><span class="day-number">9</span></td>

      <td class=" dark-month"><span class="day-number">10</span></td>

      <td class=" dark-month"><span class="day-number">11</span></td>

      <td class=" dark-month"><span class="day-number">12</span></td>

      <td class=" dark-month"><span class="day-number">13</span></td>

      <td class=" dark-month"><span class="day-number">14</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">15</span></td>

      <td class=" dark-month"><span class="day-number">16</span></td>

      <td class=" dark-month"><span class="day-number">17</span></td>

      <td class=" dark-month"><span class="day-number">18</span></td>

      <td class=" dark-month"><span class="day-number">19</span></td>

      <td class=" dark-month"><span class="day-number">20</span></td>

      <td class=" dark-month"><span class="day-number">21</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">22</span></td>

      <td class=" dark-month"><span class="day-number">23</span></td>

      <td class=" dark-month"><span class="day-number">24</span></td>

      <td class=" dark-month"><span class="day-number">25</span></td>

      <td class=" dark-month"><span class="day-number">26</span></td>

      <td class=" dark-month"><span class="day-number">27</span></td>

      <td class=" dark-month"><span class="day-number">28</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">29</span></td>

      <td class=" dark-month"><span class="day-number">30</span></td>

      <td><span class="day-number">1</span></td>

      <td><span class="day-number">2</span></td>

      <td><span class="day-number">3</span></td>

      <td><span class="day-number">4</span></td>

      <td><span class="day-number">5</span></td>
    </tr>

    <tr>
      <td><span class="day-number">6</span></td>

      <td><span class="day-number">7</span></td>

      <td><span class="day-number">8</span></td>

      <td><span class="day-number">9</span></td>

      <td><span class="day-number">10</span></td>

      <td><span class="day-number">11</span></td>

      <td><span class="day-number">12</span></td>
    </tr>

    <tr>
      <td><span class="day-number">13</span></td>

      <td><span class="day-number">14</span></td>

      <td><span class="day-number">15</span></td>

      <td><span class="day-number">16</span></td>

      <td><span class="day-number">17</span></td>

      <td><span class="day-number">18</span></td>

      <td><span class="day-number">19</span></td>
    </tr>

    <tr>
      <td><span class="day-number">20</span></td>

      <td><span class="day-number">21</span></td>

      <td><span class="day-number">22</span></td>

      <td><span class="day-number">23</span></td>

      <td><span class="day-number">24</span></td>

      <td><span class="day-number">25</span></td>

      <td><span class="day-number">26</span></td>
    </tr>

    <tr>
      <td><span class="day-number">27</span></td>

      <td><span class="day-number">28</span></td>

      <td><span class="day-number">29</span></td>

      <td><span class="day-number">30</span></td>

      <td><span class="day-number">31</span></td>

      <td class=" dark-month"><span class="day-number">1</span></td>

      <td class=" dark-month"><span class="day-number">2</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">3</span></td>

      <td class=" dark-month"><span class="day-number">4</span></td>

      <td class=" dark-month"><span class="day-number">5</span></td>

      <td class=" dark-month"><span class="day-number">6</span></td>

      <td class=" dark-month"><span class="day-number">7</span></td>

      <td class=" dark-month"><span class="day-number">8</span></td>

      <td class=" dark-month"><span class="day-number">9</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">10</span></td>

      <td class=" dark-month"><span class="day-number">11</span></td>

      <td class=" dark-month"><span class="day-number">12</span></td>

      <td class=" dark-month"><span class="day-number">13</span></td>

      <td class=" dark-month"><span class="day-number">14</span></td>

      <td class=" dark-month"><span class="day-number">15</span></td>

      <td class=" dark-month"><span class="day-number">16</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">17</span></td>

      <td class=" dark-month"><span class="day-number">18</span></td>

      <td class=" dark-month"><span class="day-number">19</span></td>

      <td class=" dark-month"><span class="day-number">20</span></td>

      <td class=" dark-month"><span class="day-number">21</span></td>

      <td class=" dark-month"><span class="day-number">22</span></td>

      <td class=" dark-month"><span class="day-number">23</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">24</span></td>

      <td class=" dark-month"><span class="day-number">25</span></td>

      <td class=" dark-month"><span class="day-number">26</span></td>

      <td class=" dark-month"><span class="day-number">27</span></td>

      <td class=" dark-month"><span class="day-number">28</span></td>

      <td class=" dark-month"><span class="day-number">29</span></td>

      <td class=" dark-month"><span class="day-number">30</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">31</span></td>

      <td><span class="day-number">1</span></td>

      <td><span class="day-number">2</span></td>

      <td><span class="day-number">3</span></td>

      <td><span class="day-number">4</span></td>

      <td><span class="day-number">5</span></td>

      <td><span class="day-number">6</span></td>
    </tr>

    <tr>
      <td><span class="day-number">7</span></td>

      <td><span class="day-number">8</span></td>

      <td><span class="day-number">9</span></td>

      <td><span class="day-number">10</span></td>

      <td><span class="day-number">11</span></td>

      <td><span class="day-number">12</span></td>

      <td><span class="day-number">13</span></td>
    </tr>

    <tr>
      <td><span class="day-number">14</span></td>

      <td><span class="day-number">15</span></td>

      <td><span class="day-number">16</span></td>

      <td><span class="day-number">17</span></td>

      <td><span class="day-number">18</span></td>

      <td><span class="day-number">19</span></td>

      <td><span class="day-number">20</span></td>
    </tr>

    <tr>
      <td><span class="day-number">21</span></td>

      <td><span class="day-number">22</span></td>

      <td><span class="day-number">23</span></td>

      <td><span class="day-number">24</span></td>

      <td><span class="day-number">25</span></td>

      <td><span class="day-number">26</span></td>

      <td><span class="day-number">27</span></td>
    </tr>

    <tr>
      <td><span class="day-number">28</span></td>

      <td><span class="day-number">29</span></td>

      <td><span class="day-number">30</span></td>

      <td class=" dark-month"><span class="day-number">1</span></td>

      <td class=" dark-month"><span class="day-number">2</span></td>

      <td class=" dark-month"><span class="day-number">3</span></td>

      <td class=" dark-month"><span class="day-number">4</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">5</span></td>

      <td class=" dark-month"><span class="day-number">6</span></td>

      <td class=" dark-month"><span class="day-number">7</span></td>

      <td class=" dark-month"><span class="day-number">8</span></td>

      <td class=" dark-month"><span class="day-number">9</span></td>

      <td class=" dark-month"><span class="day-number">10</span></td>

      <td class=" dark-month"><span class="day-number">11</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">12</span></td>

      <td class=" dark-month"><span class="day-number">13</span></td>

      <td class=" dark-month"><span class="day-number">14</span></td>

      <td class=" dark-month"><span class="day-number">15</span></td>

      <td class=" dark-month"><span class="day-number">16</span></td>

      <td class=" dark-month"><span class="day-number">17</span></td>

      <td class=" dark-month"><span class="day-number">18</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">19</span></td>

      <td class=" dark-month"><span class="day-number">20</span></td>

      <td class=" dark-month"><span class="day-number">21</span></td>

      <td class=" dark-month"><span class="day-number">22</span></td>

      <td class=" dark-month"><span class="day-number">23</span></td>

      <td class=" dark-month"><span class="day-number">24</span></td>

      <td class=" dark-month"><span class="day-number">25</span></td>
    </tr>

    <tr>
      <td class=" dark-month"><span class="day-number">26</span></td>

      <td class=" dark-month"><span class="day-number">27</span></td>

      <td class=" dark-month"><span class="day-number">28</span></td>

      <td class=" dark-month"><span class="day-number">29</span></td>

      <td class=" dark-month"><span class="day-number">30</span></td>

      <td class=" dark-month"><span class="day-number">31</span></td>

      <td><span class="day-number">1</span></td>
    </tr>

    <tr>
      <td><span class="day-number">2</span></td>

      <td><span class="day-number">3</span></td>

      <td><span class="day-number">4</span></td>

      <td><span class="day-number">5</span></td>

      <td><span class="day-number">6</span></td>

      <td><span class="day-number">7</span></td>

      <td><span class="day-number">8</span></td>
    </tr>

    <tr>
      <td><span class="day-number">9</span></td>

      <td><span class="day-number">10</span></td>

      <td><span class="day-number">11</span></td>

      <td><span class="day-number">12</span></td>

      <td><span class="day-number">13</span></td>

      <td><span class="day-number">14</span></td>

      <td><span class="day-number">15</span></td>
    </tr>
  </tbody></table>
</div>