Document
  

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(亮度)。
posted @ 2021-06-02 17:07  半个失忆人  阅读(2307)  评论(1)    收藏  举报