[IE兼容] el-table组件固定列触发滑轮滚动时,移动速度缓慢 另类解决方法

[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 安装依赖包时会触发补丁修补

上一篇:python实训day6


下一篇:Python学习 day6