Question

我正在使用固定导航栏进行网站使用＆＃34;平滑滚动＆＃34;使用jQuery与jQuery UI，我试图做一个＆＃34;修复＆＃34;梯度。请参阅我的JSfiddle HERE。

问题是滚动只适用于Firefox。它在Chrome或Safari中无效。

html, body {
  overflow:hidden;
  height:100%;
  }

Answer 1

body元素上的overflow: hidden是问题所在。

另一种方法是添加一个占用屏幕上所有可用空间的div。 div必须具有固定位置且z-index低于页面的其他元素。这是css：

div {
    background-color:#70e8e6;
    background:linear-gradient(#70e8e6 40%, #5f5f5f 80%);
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}

然后，将渐变应用于div而不是body。

我使用此解决方案更新了您的jsfiddle：http://jsfiddle.net/dskaddeb/1/

Chrome中的冲突与平滑滚动

1 个答案: