element-ui+umy-ui表格在设置固定列后,鼠标滑轮滚动时固定列与普通列错位问题(滚动完成后正常)(滚动迟钝、迟滞问题)(background-blend-mode)


问题描述

在使用element-ui+umy-ui表格时候,设置了固定列,鼠标滑轮滚动会导致固定列与普通列错位(在谷歌浏览器会出现这个问题,360是正常的),就像迟钝一样,鼠标在固定列滚动时,固定列先动,普通列迟钝一会跟上,反之亦然,如下图

在停止滚动后,界面恢复正常,又变回对齐的状态:

监听滚动,得到的表格偏移量也是一致(element中固定列的实现方式是再加一个表格)

解决办法

在设置滚动的样式类中加background-blend-mode样式,我试了一下,不设置成Nomal基本都可以

不会找相应类的,可以把选择样式的指向滚动条,基本都可以找到这个容器。
原因:出现问题的原因我其实没有去研究,可能是两个表格滚动时,背景不叠加导致的动态视觉错位。如果有朋友知道是什么问题导致的,评论区可以告诉我哟,谢谢啦。

background-blend-mode:就是背景的混合模式,可以将两张图片叠加在一起,我看别人很多用于动态制作。
描述
normal 默认。把混合模式设置为普通。
multiply 把混合模式设置为 multiply(乘)。
screen 把混合模式设置为 screen(屏幕)。
overlay 把混合模式设置为 overlay(覆盖)。
darken 默认。把混合模式设置为普通。
lighten 把混合模式设置为 lighten(变亮)。
color-dodge 把混合模式设置为 color-dodge(颜色减淡)。
saturation 把混合模式设置为 saturation(饱和度)。
color 把混合模式设置为 color(颜色)。
luminosity 把混合模式设置为 luminosity(亮度)。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM