0

好吧，stackxicans，我怎样才能让一个 div 只在一个方向上固定，并在Safari/iPad中随着滚动向另一个方向移动它？

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

  • “滚动”事件仅在滚动完成后触发，
  • 有诸如 touchstart、touchmove、touchend 之类的事件——但如果您尝试使用这些事件来快速计算它是垂直移动还是水平移动，然后设置 css 属性，则 safari 在滚动完成之前不会呈现您的 css 更改。

我总是以不干净、迟钝或丑陋的效果告终。目标是使绿色标题仅水平移动，而蓝色行仅在白色内容区域的滚动上垂直移动。

描写

4

2 回答 2

0

滚动事件在移动设备上有点狡猾，因为它实际上渲染了整个页面并只是在屏幕上移动它，它没有像我们预期的那样滚动，这就是我们努力在 CSS 中使用固定或粘性位置的原因。

而不是附加到滚动事件，我会找到一个替代方法并检查文档的位置。

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

于 2013-03-22T20:14:40.030 回答
0

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

-webkit-overflow-scrolling: touch;

在你感兴趣的元素上，那么你可以使用 sth. 像

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 });
});

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

于 2013-03-23T13:28:23.950 回答