jquery - Chrome 中平滑滚动的冲突

标签 jquery html css google-chrome

我正在做一个带有固定导航栏的网站,用于使用 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/

相关文章:

javascript - jQuery-UI: resizable - 如何增加可拖动边缘的大小?

jquery - 问题定位要素

javascript - 获取所有不包含数据属性的元素

html - webkit 在列表中的 float 元素后面显示元素符号

html - 使用表格布局更改表格的列宽 : fixed with CSS

ruby-on-rails - jQuery .on() 不适用于 jquery-ujs

jquery - 如何使用 jquery each 函数获取值列表

javascript - 当 phonegap 版本从 1.5 更新到 1.9 时,android 中的 Phonegap 应用程序导致强制关闭

html - 为什么垂直对齐: middle not working on my span or div?

php - 将一些 PHP 移植到 ColdFusion