javascript - 更改宽度时叠加的图像会闪烁

Question

我正在制作图像比较功能。它工作得相当好，除了当前面(蓝色)图像改变宽度时图像会闪烁。这似乎是 z-index 的某种问题？

行为因使用的浏览器而略有不同:

• Safari:有点闪烁
• Chrome:经常闪烁
• Firefox:始终显示绿色图像

const $imageSlider = document.querySelector(".image-slider");
const $sliderHandle = $imageSlider.querySelector(".image-slider__handle");
const $container = $imageSlider.querySelector(".image-slider__container--left");

const handleMouseMove = event => {
  const sliderPosition = `${(event.offsetX / $imageSlider.offsetWidth) * 100}%`;
  $container.style.width = sliderPosition;
  $sliderHandle.style.left = sliderPosition;
};

$imageSlider.addEventListener("mousemove", event =>
  requestAnimationFrame(() => handleMouseMove(event))
);

.image-slider {
  position: relative;
  display: inline-block;
}

.image-slider__handle {
  content: " ";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  display: block;
  width: 0.25rem;
  background-color: white;
  transform: translateX(-50%);
}

.image-slider__container {
  height: 100%;
}

.image-slider__container--left {
  position: absolute;
  width: 50%;
  overflow: hidden;
}

.image-slider__image {
  display: block;
  height: 100%;
}

<p>Move the mouse across the surface below to compare images:</p>

<div class="image-slider">
  <div class="image-slider__container image-slider__container--left">
    <img src="https://via.placeholder.com/200/0000FF/808080?text=Lorem" class="image-slider__image" alt="" />
  </div>
  <div class="image-slider__container image-slider__container--right">
    <img src="https://via.placeholder.com/400/00FF00/808080?text=Ipsum" class="image-slider__image" alt="" />
  </div>
  <div class="image-slider__handle"></div>

</div>

Answer 1

闪烁是由影响图像 slider 的“悬停”引起的在悬停时运行的逻辑。将 slider 悬停在鼠标下方会移动 handle ， handle 现在会拦截悬停事件，从而导致进一步的悬停计算其偏移值是相对于 handle 而不是 slider 。一旦鼠标离开 handle ，它就会再次正确地在 slider 上​​引发 mousemove 事件。

这很容易通过将 pointer-events: none 应用于所有可能阻止(和拦截)指针事件的元素来解决。

请原谅约定的改变——我为自己重命名了一些类。

const imageSlider = document.querySelector('.slider');
const sliderHandle = imageSlider.querySelector('.handle');
const container = imageSlider.querySelector('.pane.left');

imageSlider.addEventListener('mousemove', event => {
  const sliderPosition = `${(event.offsetX / imageSlider.offsetWidth) * 100}%`;
  container.style.width = sliderPosition;
  sliderHandle.style.left = sliderPosition;
});

.slider {
  position: relative;
  display: inline-block;
}

.slider > .handle {
  content: " ";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  display: block;
  width: 0.25rem;
  background-color: white;
  transform: translateX(-50%);
  pointer-events: none; /* Don't block mouse events to .slider! */
}

.slider > .pane {
  height: 100%;
  pointer-events: none; /* Don't block mouse events to .slider! */
}

.slider > .pane.left {
  position: absolute;
  width: 50%;
  overflow: hidden;
}

.slider > .pane > img {
  display: block;
  height: 100%;
}

<p>Move the mouse across the surface below to compare images:</p>

<div class="slider">
  <div class="pane left">
    <img src="https://via.placeholder.com/200/0000FF/808080?text=Lorem" alt="" />
  </div>
  <div class="pane right">
    <img src="https://via.placeholder.com/400/00FF00/808080?text=Ipsum" alt="" />
  </div>
  <div class="handle"></div>

</div>