Chrome瀏覽器中的衝突與平滑滾動

Question

我正在做一個固定導航欄的網站使用「平滑滾動」使用jQuery與jQuery UI和我試圖做一個「固定」的漸變。看到我的JSfiddle HERE。

問題是，滾動只適用於Firefox。它在Chrome或Safari中不起作用。

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

Answer 1

關於身體元素的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而不是正文。

我更新您的jsfiddle該解決方案：http://jsfiddle.net/dskaddeb/1/