首页 > 其他 > 详细

页面布局中使用hover手风琴特效,高度拉高后,滚动滚轮的失焦,导致的bug

时间:2020-08-14 23:27:58      阅读:80      评论:0      收藏:0      [点我收藏+]

具体描述:

  就是页面上有一些卡片,hover上去,下面会出现一个手风琴效果的折叠板,高度撑起时,导致滚动条升高,鼠标滚轮可以滚动

滚动后,卡片失焦,折叠板收起,高度回落,滚动条减低,卡片下落重新获取焦点,折叠板展开,高度撑起

  因为之前滚轮滚动过,导致滚动条信息,比实际值要大,所以卡片获取焦点后,折叠板展开的过程不是往下展开,是向上顶起,

会顶起卡片,导致卡片再次失去焦点,然后就进入了一个循环。bug出现。

解决方法:

  折叠板展开的过程中,给外层父元素一个同折叠板高度的padding,或者magin,总之就是先把高度称出来,父元素高度padding,maigin往下减

  达到一个总高度的平衡。

总结,隐藏元素展开收起,如果没有脱离文档流,高度撑起影响布局的一个解决办法

  

页面布局中使用hover手风琴特效,高度拉高后,滚动滚轮的失焦,导致的bug

原文:https://www.cnblogs.com/tablv/p/13505005.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!