0

我目前正在开发一个 iPad JS/HTML 应用程序，使用本机滚动查看大型条形图 svg。

我希望沿 x 和 y 轴的标签沿图表的顶部和左侧持续存在。基本上，图表应该在标签下方自由滑动，标签本身只会在适当的方向上移动（例如，当您向左滚动时，x 轴标题将移动其标签，而 y 轴标签用于垂直滚动）

我目前有一些 css 可以做到这一点，但本机滚动移动的速度比我的 javascript 同步面板快得多。当一个元素比另一个元素被拖得更快时，就会出现这种弹性相互作用。一旦滚动动画停止，它就会全部放到正确的位置，但是在滚动进行时交互看起来很卡。

有没有更好的方法来解决这个问题？我可以利用他们的其他活动吗？有没有办法强制多个可滚动的 div 对同一个滚动事件做出反应，而无需手动计算 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');
});
4

1 回答 1

0

所以事实证明，你不能。至少，目前不是。

根据苹果开发者文档 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);
            };
于 2012-05-17T17:56:07.837 回答