鼠标移上小图，右边展示大图

Question

当这个img全部展示的时候，鼠标移入，蓝色阴影部分会跟着移动，但当往下滑，img展示不全的时候，蓝色阴影就不跟着鼠标移动了，ev.clientY随着屏幕滚动，数值越来越小，所以导致蓝色阴影高度取值就有问题

图中红色箭头是箭头所在位置，但是无法让蓝色阴影跟随鼠标，太苦恼了

<div class="wrap">
      <div class="smallImg imgBox">
        <img :src="nowImg" width="400" />
        <div id="shadow"></div>
      </div>
      <div class="bigImg imgBox">
        <img :src="nowImg" width="800" />
      </div>
    </div>
    <div class="imgArr">
      <ul v-for="(item,index) in imgList" :key="index">
        <li :class="imgHover===index?'lightnow':''" @mouseover="setActiveItem(item,index)">
          <img :src="item.img" alt />
        </li>
      </ul>
    </div>
    <div style="height:800px"></div>

mounted() {
    window.onload = function () {
      var wrap = document.getElementsByClassName("wrap")[0];
      var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
      var smallImg = smallImgBox.getElementsByTagName("img")[0];
      var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
      var bigImg = bigImgBox.getElementsByTagName("img")[0];
      var shadow = document.getElementById("shadow");

      smallImgBox.onmouseover = function () {
        shadow.style.display = "block";
        bigImgBox.style.display = "block";
      };
      smallImgBox.onmouseout = function () {
        shadow.style.display = "none";
        bigImgBox.style.display = "none";
      };

      smallImgBox.onmousemove = function (ev) {
        var ev = ev || window.event;
        var x = ev.clientX - smallImgBox.offsetLeft - wrap.offsetLeft;
        var y = ev.clientY - smallImgBox.offsetTop - wrap.offsetTop;
        var distanceTop= document.documentElement.scrollTop||document.body.scrollTop;

        var l = x - shadow.offsetWidth / 2;
        var t =  y - shadow.offsetWidth / 2;
        console.log(123,ev.clientY)

        if (l <= 0) {
          l = 0;
        } else if (l >= smallImgBox.offsetWidth - shadow.offsetWidth) {
          l = smallImgBox.offsetWidth - shadow.offsetWidth;
        }
        if (t <= 0) {
          t = 0;
        } else if (t >= smallImgBox.offsetHeight - shadow.offsetHeight) {
          t = smallImgBox.offsetHeight - shadow.offsetHeight;
        }
        shadow.style.left = l + "px";
        shadow.style.top = t + "px";

        var radioX = l / (smallImgBox.offsetWidth - shadow.offsetWidth);
        var radioY = t / (smallImgBox.offsetHeight - shadow.offsetHeight);
        bigImg.style.left = -radioX * (bigImg.width - bigImgBox.offsetWidth) + "px";
        bigImg.style.top = -radioY * (bigImg.height - bigImgBox.offsetHeight) + "px";
      };
    };
  },

.wrap {
  position: relative;
  height: 400px;
  width: 850px;
  margin: 20px 0 0 0px;
}
.wrap .smallImg,
.wrap .bigImg {
  position: absolute;
  top: 0;
  
  outline: 2px solid red;
  overflow: hidden;
}
.wrap .smallImg {
  left: 0;
  width: 400px;
  height: 400px;
}
.wrap .bigImg {
  left: 420px;
  display: none;
  width: 300px;
  height: 300px;
}
.wrap .smallImg img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.wrap .bigImg img {
  position: absolute;
  left: 0;
  top: 0;
}
#shadow {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 150px;
  height: 150px;
  cursor: move;
  background: rgba(0, 0, 255, 0.5);
}
.lightnow {
  border: 1px solid black;
  width: 102px;
  height: 102px;
}
.imgArr {
  width: 1366px;
  height: 100px;
  margin-left:-40px;
  ul li {
    float: left;
    margin-right: 10px;
  }
  img {
    width: 100px;
    height: 100px;
  }
}

Answer 1

等待大神解答