[IE兼容] el-table组件固定列触发滑轮滚动时,移动速度缓慢及动画不流畅
之前通过css 禁用固定列的鼠标事件形成事件穿透解决
详见上篇文章: el-table组件固定列触发滑….
style{
pointer-events:none
}
方法暴力,但对后续业务却造成影响,例如在固定列上增加点击事件时,虽然可以通过 pointer-events:auto 恢复,但滑动穿透效果失效
通过对固定列页面打断点定位mousewheel方法,发现element-ui及引用的normalize-wheel.js 中的方法导致
//相关路径:node_modules\element-ui\lib\element-ui.common.js
//node_modules/normalize-wheel/src/normalizeWheel.js
问题
1.element-ui.common.js没有针对固定列滚动设置滑动方法
//定位到方法位置---line-13649
handleFixedMousewheel: function handleFixedMousewheel(event, data) {
...
bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
...
},
滚动距离采用步长/5
并且由于没有使用缓动效果,弥补了滚动距离短造成的卡顿,如果想要达到正常滚动效果,就需要添加一个缓动效果
scrollAnimate:function scrollAnimate(ele,event, target) {
clearInterval(ele.timer);
let t = 10;
ele.timer = setInterval(function () {
let step = (target ) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
ele[event] += step ;
t--;
if (t<0) {
clearInterval(ele.timer);
}
}, 10);
},
//替换之前的步长
this.scrollAnimate(bodyWrapper,'scrollTop',data.pixelY/2)
// bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
但是在运行中发现,ie仍然变化微弱,此时定位pixelY值的获取,通过打断点发现应该在引用的normalizeWheel模块中
2.normalizeWheel.js中初始step值过小
默认
var PIXEL_STEP = 10;
更改
var PIXEL_STEP = 100;
//event 为鼠标事件
//chrome firefox中均可以获取 deltaY 100
//而ie没有,故只能使用默认值10*方向(sY)
pX = sX * PIXEL_STEP;
pY = sY * PIXEL_STEP;
if ('deltaY' in event) { pY = event.deltaY; }
if ('deltaX' in event) { pX = event.deltaX; }
3.为node_modules相关文件打补丁,同步生产环境
需要patch-package模块
npm i patch-package -S-D
并在package.json中新增命令
{
"scripts": {
"postinstall": "patch-package"
},
}
在更改相关模块文件之后,为相关模块创建补丁
npx patch-package normalize-wheel element-ui
之后通过install 安装依赖包时会触发补丁修补