“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”
在项目中做了一个图片查看器的逻辑需求，通过鼠标可以拖拽图片位置，鼠标滚轮放大缩小，但是在图片缩小的时候，出现了交互上的重叠，因为图片存放的div只是页面的一部分，而页面本身也是存在滑块的，所以图片缩小的时候也会相应的滑动；
所以这个问题必须解决
思考
最初想到的是用overflow：hidden，因为来回切换，滑动条的出现或消失导致页面一直抖动
我最开始想到的事如何用js禁止滚动
document.body.onmousewheel = function () {return false;}
但是，行不通
//禁止滚动条滚动
function unScroll() {
var top = $(document).scrollTop();
$(document).on('scroll.unable',function (e) {
$(document).scrollTop(top);
})
}
//移除禁止滚动条滚动
function removeUnScroll() {
$(document).unbind("scroll.unable");
}
这种也尝试过，依旧不成功
又回到了起点
决定采用overflow：hidden
如何切换样式呢
通过鼠标事件mouseover和mouseout或mouseenter和mouseleave
先说说mouseover和mouseenter的区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout
mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
mouseover和mouseenter的异同体现在两个方面：
- 是否支持冒泡
2.事件的触发时机
先看一张图，对这两件事有一个简单直观的感受。
mouseenter事件的情况：
当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。
也就是说：mouseover支持事件冒泡，而mouseenter不支持事件冒泡
一番考虑之后我这里选用mouseover和mouseout
通过mouseover和mouseout
动态的添加或移除样式
html
<div class="image-container" :class="{ 'hiddenScroll': hiddenScroll }">
<div class="image-main">
<div id="mainContainer">
<div>
<div class="img-wrapper"
:style="imgStyle"
@mousedown="handleMouseDown"
@mouseover="handleMouseOver"
@mouseout="handleMouseOut">
<img src="../assets/pa.png"/>
</div>
</div>
</div>
</div>
</div>
css
.image-container {
height: 820px;
overflow: auto;
}
.image-container.hiddenScroll {
overflow: hidden;
}
如何解决抖动
抖动是因为滚动条的消失导致的，消失的宽度需要额外的填充，这样可以保证页面在肉眼看来是不会抖动的；
所以我们只需要额外加一个padding就可以了
.image-container.hiddenScroll {
padding-right: 6px; // 这里的padding-right: 6px是因为滑块宽为6px
overflow: hidden;
}
请注意：我自定义了滑块样式，这里的padding-right: 6px是因为滑块宽为6px
对于firefox无法修改滚动条宽度的浏览器，需要额外的做兼容性考虑
