Question

我有一个website使用javscript告诉页脚链接/徽标在页脚在视图中时位置绝对或位置固定。页脚总是在视图中，因为它隐藏在页面后面，当您向下滚动时，它似乎会滑入。

然而，在IOS Safari上（我看过只有移动浏览器会出现这种行为），页脚不会像其他地方一样坚持/变得绝对。

下面的代码有一些过多的修复（字面意思是我可以抛出的所有东西）仍然没有修复它。

因此经过多次实验后，问题不在于滚动事件。这似乎是当我快速滚动（最明显地在主页上）向下滚动时发生的错误。检查员显示javascript实际上已经被解雇，并且就safari而言，它绝对定位。但它显示在屏幕的底部。一旦你实现这个错误就向上滚动，它会自动纠正，直到javascript通常会再次触发以使其修复。

//is the footer in view? if so, make the footer buttons stick to bottom of wrapper and not page
function checkOffset() {
    if($('.sticky').offset().top + $('.stickyRight').height() >= $('footer').offset().top) {
      $('.sticky').addClass('absolute'); 
    }
    if($(document).scrollTop() + window.innerHeight < $('footer').offset().top) {
        $('.sticky').removeClass('absolute'); // restore when you scroll up
    }

}

$(document).ready(function() {
  var timer = null;
  timer = setTimeout(function() {
      $(document).scroll();
      checkOffset();
  }, 700);
});


$(document).scroll(function() {
  checkOffset();
});

$(document).scroll(function() {
  //safari ios bug where this event is not always getting fired.
  var timer = null;
  timer = setTimeout(function() {
      $(document).scroll();
  }, 800);
});

$(document).scroll(function() {
  //safari ios bug where this event is not always getting fired.
  ios();
});

document.addEventListener("touchstart", ios, false);
document.addEventListener("touchmove", ios, false);
document.addEventListener("touchend", ios, false);
document.addEventListener("gesturechange", function() {ios();})

我的css看起来像这样：

.sticky {
  position: fixed;
  z-index: 3;
  bottom: 1rem;
}

.stickyLeft {
    left: 1rem;
}

.stickyRight {
    right: 1rem;
}

编辑：我通过删除主页的这个javascript并将其保持绝对位置作为默认值来“解决”这个问题，因为那是问题出现最多的地方。有关页面高度的问题导致了这个问题。对于其他每一页，我都使用了上面代码的精简版。

IOS Safari错误绝对/固定位置元素与轻弹滚动

0 个答案: