iPad / Mobile Safari：div固定在一个方向

Question

Allright stackxicans，我怎样才能将div固定在一个方向上并在 Safari / iPad 中用另一个方向的滚动移动？

是的，在桌面浏览器上，使用javascript非常容易。但是你有没有试过在iPad上这样做..例如this。它很丑。 （至少对我来说）出现了许多问题：

• “滚动” - 事件仅在滚动完成后触发，
• 有像touchstart，touchmove，touchend这样的事件 - 但是如果你尝试使用它们来快速计算它是垂直或水平移动然后设置css属性，safari不会渲染你的css更改，直到滚动完成

我总是以不洁净，迟滞或丑陋的效果结束。目标是绿色标题仅水平移动，蓝色行仅在白色内容区域的滚动中垂直移动。

Answer 1

滚动事件在移动设备上略显狡猾，因为它实际上呈现整个页面并且只是在屏幕上移动它，它不会像我们预期的那样滚动，这就是我们努力使用固定或粘性位置的原因CSS。

我没有附加到滚动事件，而是找到了替代方案并检查了文档的位置。

http://cubiq.org/iscroll是一个很好的帮助插件

Answer 2

如果其他人遇到类似的问题，这是我的“解决方案”。禁用

-webkit-overflow-scrolling: touch;

关于你感兴趣的元素，那么你可以使用......像

var element = $("#element");
element.bind('touchmove', function (e) {
    scrollTop = element.scrollTop();
    scrollLeft = element.scrollLeft();
    $(".yAxisHeader").css({ left: 0, top: -scrollTop });
    $(".xAxisHeader").css({ top: 0, left: -scrollLeft });
});

从桌面浏览器解决方案中了解到。权衡：失去了良好的平滑滚动惯性效果。