“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
动态的添加或移除样式
<div class="image-container"  :class="{ 'hiddenScroll': hiddenScroll }">
    <div class="image-main">
      <div id="mainContainer">
          <div class="img-wrapper"
              :style="imgStyle"
              @mousedown="handleMouseDown"
              @mouseover="handleMouseOver"
              @mouseout="handleMouseOut">
            <img src="../assets/pa.png"/>
.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无法修改滚动条宽度的浏览器，需要额外的做兼容性考虑