ipad js/html - попытка синхронизации фиксированного заголовка и боковой панели на родной прокрутке div

Question

В настоящее время я работаю над iPad JS/HTML-приложением, используя собственную прокрутку для просмотра большой гистограммы svg.

Я ищу, чтобы маркировка вдоль осей x и y сохранялась вдоль верхней и левой части графика. В принципе, график должен скользить свободно под ярлыками, которые сами будут двигаться только в соответствующем направлении (например, заголовок оси x сдвинет свои метки по мере прокрутки влево и отметки оси y для вертикальной прокрутки)

У меня в настоящее время есть css, чтобы сделать это, но родная прокрутка движется намного быстрее, чем мой javascript, чтобы синхронизировать панели. Это своего рода эластичное взаимодействие, поскольку один элемент перетаскивается быстрее, чем другой. После того, как анимация прокрутки прекратится, все встанет в нужное место, но при прокрутке взаимодействие выглядит довольно шумно.

Есть ли лучший способ решить эту проблему? Являются ли их другие события, которые я мог бы использовать? Есть ли способ заставить несколько прокручиваемых divs реагировать на одно и то же событие прокрутки без расчета позиций вручную js? Или это отставание неизбежно из-за того, что естественная прокрутка выгружается в gpu?

/* CSS */ 
.fixedaxis { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    background: blue; 
} 

#chartheader { 
    z-index:5; 
} 

#sidebar { 
    z-index:6; 
} 

    .scroll { 
     overflow: auto; 
     -webkit-overflow-scrolling: touch; 
    } 



/* relevant html */ 

    <div id="content" style="position: relative;"> 
     <div id="chartheader" class="fixedaxis"></div> 
     <div id="sidebar" class="fixedaxis"></div> 
     <div class="scroll"> 
      <section id="barchart"> 
      </section> 
     </div> 
    </div> 

/*javascript */ 

var scroller = $('.scroll'); 
var tableHeader = $('#chartheader'); 
var sidebar = $('#sidebar'); 
scroller.on('scroll', function() { 
    console.log("scrolling: " + this.scrollLeft); 
    tableHeader.css('left', (-1 * this.scrollLeft) + 'px'); 
    sidebar.css('top', (-1 * this.scrollTop) + 'px'); 
}); 

Answer 1

Так получилось, вы не можете. По крайней мере, не сейчас.

По словам разработчика документации компании Apple https://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Вы получаете события для прокрутки, когда палец пользователя находится на экране, и один заключительное событие прокрутки один раз импульс останавливается. Если контент перемещается между этими двумя периодами, вы не получаете никаких событий.

То, что мы закончили, делает полупрозрачным содержимое боковой панели во втором событии прокрутки, а затем делает его непрозрачным после таймаута с учетом повторного позиционирования, если снова произошло одно прокручивание «импульса» ,

Что-то вдоль линий:

  var lastTimeout; 
      var numScrolls = 1; 
      var startTop = 0; 

      function(event) { 
       var elem = event.target; 
       startTop = startTop || elem.scrollTop; 

       if (lastTimeout) { 
        clearTimeout(lastTimeout); 
       } else if (numScrolls == -1) { 
        /* I've omitted some short circuit logic for other scrolling cases 
        * but that's why we're going off of -1 here 
        */ 

        // stray scroll from native scroll end 
        $labels[0].scrollTop = elem.scrollTop; 
        $labels.css('opacity', '1'); 
        startTop = null; 
       } 


       // wait for two consecutive scrolls 
       if (numScrolls > 0) { 
        $labels.css('opacity', '0.3'); 
       } 

       ++numScrolls; 
       lastTimeout = setTimeout(function() { 
        console.log(elem.scrollTop); 
        $labels[0].scrollTop = elem.scrollTop; 
        $labels.css('opacity', '1'); 
        lastTimeout = null; 
        numScrolls = -1; 
        startTop = null; 
       }, 1000); 
      };