【问题标题】:Sticky navigation lag on scroll滚动时的粘性导航滞后
【发布时间】:2016-07-31 21:43:50
【问题描述】:

这是我正在开发的网站:Click here - Home Page Scroll Issue

我正在使用 Foundation 5、粘性滚动条和 Owl Carousel(我尝试过使用 Slick carousel,结果是一样的)。

我遇到的问题是,每当我向上/向下滚动并且顶部栏越过轮播时,整个页面都会卡顿,并且滚动会比预期的轨迹更短地颠簸和停止。

我尝试了很多解决方案,包括将z-index-webkit-transform: translateZ(0) 规则应用于轮播,但均未成功。

这个问题在 Firefox 或 Edge 中似乎不存在,或者至少不那么明显。

有什么想法吗?

**更新,Ajay Varghese's 答案似乎有助于向下滚动,但向上滚动时问题仍然存在。当复制下一个内容行以增加页面长度时,如果您尝试向上滚动以显示轮播,它会跳转并产生滚动卡顿。这个问题很烦人,我还是找不到原因。

【问题讨论】:

    标签: javascript html google-chrome web scroll


    【解决方案1】:

    尝试在 .fixed 类中添加overflow: hidden;

    .fixed {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
        overflow: hidden;
        left: 0;
    }
    

    【讨论】:

    • 在 Chrome 开发者工具中试过,并没有产生任何差异。
    【解决方案2】:

    我不明白问题是如何发生的。但是我尝试了一些方法并解决了问题。在我删除了您为 .main-content 提供的“margin-top”之后,没有发生跳跃。这将使轮播保持在我们不想要的 .main-content 框上。我通过提供一些额外的高度来解决它,并通过提供“位置:相对”和“顶部:15px”来推动轮播。你能试试这个并告诉我吗?

    【讨论】:

    • 谢谢您,但效果不佳。我按照您的建议尝试了以下.main-content { margin-top: 0 }.owl-carousel { position: relative; top: 15px; }
    • 这似乎可以解决大屏幕上的问题,因为滚动会变短,但是如果您在开发者工具中复制下面的行,您会看到滚动轮播仍然会产生滚动凸起.
    • 我刚刚删除了margin-top,它似乎工作。我在 chrome、ubuntu 操作系统中尝试过。在 MAC 中也进行了测试。在那里我没有改变任何东西,也没有解决问题。
    • 如果您从上到下滚动,它似乎确实可以解决问题。但是,如果您尝试复制下面的行并尝试相同的操作但从下到上滚动,您将看到滚动再次碰撞和闪烁。这意味着一旦页面中添加了更多内容,滚动就不会流畅
    【解决方案3】:

    此问题仅存在于 Chrome 中。问题似乎是 WebKit 有时不能很好地处理分层。

    以下是最适合我的解决方案: body { -webkit-transform: translate3d(0, 0, 0);}

    希望这可以帮助某人并节省他们宝贵的时间。

    **更新,我没有意识到这会破坏粘性顶栏。因此,这种方案是不可行的。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-03-08
      • 2017-03-14
      • 1970-01-01
      • 2015-05-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多