我正在做一个带有固定导航栏的网站,用于使用 jQuery 和 jQuery UI 使用“平滑滚动”,我正在尝试做一个“固定”渐变。查看我的 JSfiddle HERE .
问题是滚动只适用于 Firefox。它不适用于 Chrome 或 Safari。
html, body {
overflow:hidden;
height:100%;
}
最佳答案
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/
关于jquery - Chrome 中平滑滚动的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28331751/