最近项目做一个滚动条随另一个滚动条等比例滚动的东西,监听左边的scroll事件就可以让右边等比例滚动了,然而右边滚动时虽然也在滚动,但是滚动的特别慢;
通过控制条打印scrollTop可以看到开始左边滚动时scrollTop是一个等比增加的过程
但是去移动右边的时候发现右边增加的很慢!
代码如下:
const r = document.querySelector('.right')
// 左右两边监听鼠标进去移除事件
l.addEventListener('mouseenter', lFn);
l.addEventListener('mouseleave', lFn);
r.addEventListener('mouseenter', rFn);
r.addEventListener('mouseleave', rFn);
// 事件 要移除
function lFn() {
l.addEventListener('scroll', function () {
r.scrollTop = l.scrollTop * 1.5;
console.log('l.scrollTop', l.scrollTop)
});
r.removeEventListener('scroll', function () {
l.scrollTop = r.scrollTop / 1.5;
console.log('r.scrollTop', r.scrollTop)
});
}
function rFn() {
r.addEventListener('scroll', function () {
l.scrollTop = r.scrollTop / 1.5;
console.log('r.scrollTop', r.scrollTop)
});
l.removeEventListener('scroll', function () {
r.scrollTop = l.scrollTop * 1.5;
console.log('l.scrollTop', l.scrollTop)
});
}
通过研究发现是移除事件的时候并没有移除成功,但是看到removeEventListener里面与addEventListener是一样的啊? 最后通过网上查阅发现了原因,虽然你写的一样,但是对于两个监听事件来说它们指向的内存地址是不一样的,这是两个不同的函数;我们需要提前定义好函数,然后直接作为参数传入进行了;最终代码如下:
const l = document.querySelector('.left')
const r = document.querySelector('.right')
// 左右两边监听鼠标进去移除事件
l.addEventListener('mouseenter', lFn);
l.addEventListener('mouseleave', lFn);
r.addEventListener('mouseenter', rFn);
r.addEventListener('mouseleave', rFn);
// 事件 要移除必须是同一个函数 不能用function(){},要先定义好
function lFn() {
l.addEventListener('scroll', lTop);
r.removeEventListener('scroll', rTop);
}
function rFn() {
r.addEventListener('scroll', rTop);
l.removeEventListener('scroll', lTop)
}
function lTop() {
r.scrollTop = l.scrollTop * 1.5;
console.log('l.scrollTop',l.scrollTop)
}
function rTop() {
l.scrollTop = r.scrollTop / 1.5;
console.log('r.scrollTop',r.scrollTop)
}