iOS上的滚动粘滞元素问题

Sticky Element on scroll issue on iOS

本文关键字：元素 问题 滚动 iOS      更新时间：2023-09-26

仅适用于移动设备

我有一个相对定位的元素，当滚动位置大于元素的顶部位置时，该元素就固定在屏幕的顶部。

在iOS系统中，当滚动固定元素时，它会超时滚动，直到释放。

这是我的设置:

CSS 

.sticky-element {
    position: relative;
}
.fixed-state {
    position: fixed;
    top: 0;
}

JS 

var orgStick = $('.sticky-element').position().top;
$(document).on("scroll", function(e) {
    if ($(document).scrollTop() > orgStick) {
        $('.sticky-element').addClass("fixed-state");
    }
    else {
        $('.sticky-element').removeClass("fixed-state");
    }
});

我已经尝试添加transform3d到.fixed-state之前，我声明的位置，但这没有效果。我还尝试过使用touchstart和scrollstart而不是scroll。Touchstart不会改变任何东西，而scrollstart则完全阻止位置的改变。

这里是一个jsFiddle模拟我所做的

如何在iOS上滚动时将元素固定在视图端口的顶部?

我已经试过了:

  • -webkit-overflow-scrolling:触摸body和html，但是没有效果。

  • 我也尝试过使用静态，但这将元素固定到它在html中的位置。

  • 我尝试了一个工作，我有2个元素，一个是固定元素，一个是相对元素，只是隐藏/显示元素分别。我仍然有固定元素似乎继续滚动的问题，直到我释放我的手指。

  • 我也尝试过使用sticky而不是fixed，这阻止了元素粘在视图端口的顶部

  • 我也尝试过使用插件stickyjs和jquery sticky-kit，这些也提出了同样的问题

这是由于iOS9+中position:fixed的处理方式发生了变化，显然是设计上的原因。

我找到的最简单的解决方案是防止固定元素的子元素上的z-index转换，例如:

.is-sticky {
  > * {
    -webkit-transform: translateZ(0);
  }
}
相关文章：