标签 固定定位 下的文章

chrome下固定定位元素在锚点跳转时显示不全

做项目时遇到两次,就纪录下来。(仅在chrome下出现此bug)

产生条件:

  • 1.锚点链接上绑定了点击事件;

现象:

在chrome下测试发现,绝对定位的元素只显示一部分,但是稍微滚动滚动条或者改变窗口大小后又正常了。

原因:

个人觉得:跟浏览器渲染,在点击页面内锚点时触发了默认的跳转锚点的动作和绑定的click事件,两个同时执行后绝对定位元素渲染出bug

解决方案:

  • 1.点击事件内加return false来阻止默认行为;(可行性不高,因为阻止了锚点跳转,但是也能解决显示不全的问题)
  • 2.绑定的事件写在setTimeout内,延迟执行;(能满足大部分需求)

演示代码:

DEMO