Jquery 带有-webkit溢出滚动CSS的粘性标题

使用一个修改过的jQuery插件，我们开发了一个粘性标题滚动框，以模仿iOS上本机应用程序的本机功能，并提供一个可在所有计算机上运行的跨浏览器解决方案

这是小提琴：

一切正常，包括iOS

更进一步，我想使用-webkit-overflow-scrolling:touch实现iOS的本机平滑

问题是，这会导致标题在滚动完成后重新定位，而不是在滚动发生时重新定位。有没有办法解决这个问题。这是小提琴：

jQuery

$(document).ready(function($){
    $.fn.stickySectionHeaders = function(options) {
    var settings = $.extend({ stickyClass : 'sticky', headlineSelector: 'strong'}, options);

    return $(this).each(function() {
      var $this = $(this);
      $(this).find('ul:first').bind('scroll.sticky', function(e) {
        $(this).find('> li').each(function() {
          var $this      = $(this),
              top        = $this.position().top,
              height     = $this.outerHeight(),
              $head      = $this.find(settings.headlineSelector),
              headHeight = $head.outerHeight();

          if (top < 0) {
            $this.addClass(settings.stickyClass).css('paddingTop', headHeight);
            $head.css({
              'top'  : (height + top < headHeight) ? (headHeight - (top + height)) * -1 : '',
              'width': $this.outerWidth() - $head.cssSum('paddingLeft', 'paddingRight')
            });
          } else {
            $this.removeClass(settings.stickyClass).css('paddingTop', '');
          }
        });
      });
    });
  };
  $.fn.cssSum = function() {
    var $self = $(this), sum = 0;
    $(arguments).each(function(i, e) {
      sum += parseInt($self.css(e) || 0, 10);
    });
    return sum;
  };
});

$(function(){
    $('.list').stickySectionHeaders();
});

---

每当我尝试在iOS上滚动时，我发现Javascript似乎停止执行.mmm。在第二个提琴上，这是正确的，它不会触发，直到你停止滚动。当iOS触发scroll事件处理程序时，这不是一个JS问题，但我不知道如何改变这一点。这是我的观点：这是一个iOS问题，可能不是Javascript可以解决的问题。不过，如果拦截touchmove事件并手动移动内容，您可能可以实现自己的滚动。它还允许您删除滚动条。我认为您需要使用touchmove或touchstart事件，而不是在iOS上滚动。每当我尝试在iOS上滚动时，我发现Javascript似乎停止执行.mmm。在第二个提琴上，这是正确的，它不会触发，直到你停止滚动。当iOS触发scroll事件处理程序时，这不是一个JS问题，但我不知道如何改变这一点。这是我的观点：这是一个iOS问题，可能不是Javascript可以解决的问题。不过，如果拦截touchmove事件并手动移动内容，您可能可以实现自己的滚动。它还允许您删除滚动条。我认为您需要使用touchmove或touchstart事件，而不是在iOS上滚动。