当触发 onmouseup 时，Vanilla JS before/after 滑块有问题 removing/adding 覆盖？

Question

我是 Javascript 的新手，我一直在尝试创建这里找到的这个 before/after 滑块 - https://codepen.io/HarryWilson/pen/jOPzbGz。

 document.body.addEventListener('mouseup',function(){
  active = false;
  overlay = false; 
  document.querySelector('.scroller').classList.remove('scrolling');
  overlayOffDuringSlide();
  // this is the area of code which is causing the final problem
});

以上是我确定为问题区域的JS代码区域。滑块中的所有内容都正常工作，除了当您单击其中一个图像时，叠加层会消失。我已经确定问题是由 Javascript 的 'mouseup' 部分引起的，并尝试添加额外的变量或更改我的 if 语句，以便它在任何人结束或单击时保持打开状态图片。

另请参阅此代码笔 - https://codepen.io/HarryWilson/pen/LYVmeZp

   document.body.addEventListener('mouseup',function(){
   active = false;
   overlay = false; 
   // THis is the problem area 
   // Maybe check some kinda condition for the overlay being on and if it is, keep it on ... 
   document.querySelector('.scroller').classList.remove('scrolling');
     if (document.querySelector(".overlay").style.display = "block"){
      overlayOn();
     }
     else {
      overlayOffDuringSlide();
     }
    });

在这里，我并排创建了其中两个。上面的代码是我尝试解决方法的方法（它适用于图像点击问题，但是当您在滚动条上使用鼠标时会产生一个新问题。第一个滑块（左侧）在点击图像时显示所需的效果，但是滚动条有点击问题。我想出的每一个修复都会给滑块留下一个问题 - 滚动条会带回覆盖 onmouseup 或图像将其删除 onmouseup。我希望滑块在您打开时始终显示覆盖图像（即使在单击时），然后当您在滚动条上时（即使在单击时）覆盖消失。有人能为此提供建议吗，因为我似乎只能修复一个并破坏其他？

Answer 1

如果我理解正确的话："I would like the slider to always display the overlay when you are on the images (even when clicking) and then for the overlay to disappear when you are on the scroller (even when clicking)."

这可以通过在 HTML 中稍作更改并将所有覆盖显示控制移至 CSS 来实现。这使得 JS 代码更简单，检查一下：

https://codepen.io/rafaelcastrocouto/pen/GRJXPeq

var scrolling = false;

var scroller = document.querySelector(".scroller");
var overlay = document.querySelector(".overlay");
var wrapper = document.querySelector(".wrapper");
var after = document.querySelector(".after");

scroller.addEventListener("mousedown", scrollStart);

addEventListener("mousemove", scrollMove);
addEventListener("mouseup", scrollEnd);
addEventListener("mouseleave", scrollEnd);


function scrollStart() {
  scrolling = true;
}

function scrollMove(e) {
  if (scrolling) {
    var x = e.pageX - wrapper.getBoundingClientRect().left;
    var transform = Math.max(0, Math.min(x, wrapper.offsetWidth));
    after.style.width = transform + "px";
    scroller.style.left = transform - 30 + "px";
  }
}

function scrollEnd() {
  scrolling = false;
}

body {
  display: grid;
  place-content: center;
}

.wrapper {
  position: relative;
  background-color: #202020;
  overflow: hidden;
  opacity: 100%;
  user-select: none;
  width: 900px;
  height: 600px;
}

.before,
.after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.before {
  width: 100%;
}
.after {
  width: calc(50% + 5px);
}

.content-image {
  height: 100%;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.6);
}
.wrapper:hover .overlay {
  opacity: 1;
}
.wrapper:hover .ui:hover .overlay {
  opacity: 0;
}

.hover-before,
.hover-after {
  position: absolute;
  top: 30%;
  padding: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-weight: bold;
  font-size: 40px;
}
.hover-before {
  left: 0;
  border-radius: 0 3px 3px 0;
}
.hover-after {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.scroller {
  width: 50px;
  height: 50px;
  position: absolute;
  left: calc(50% - 25px);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  border: 6px solid #fff;
}

.scroller:before,
.scroller:after {
  background: #fff;
  content: " ";
  display: block;
  width: 7px;
  height: 100vmax;
  position: absolute;
  left: calc(50% - 3.5px);
}
.scroller:before {
  top: 100%;
}
.scroller:after {
  bottom: 100%;
}

<div class="wrapper">
  <div class="before">
    <img class="content-image" src="https://www.dropbox.com/s/wu9u6l53z3q6zpa/date.jpg?raw=1" draggable="false" />
  </div>
  <div class="after">
    <img class="content-image" src="https://www.dropbox.com/s/6i60hcgrz7yatl5/nexus-6-2770-001.jpg?raw=1" draggable="false" />
  </div>
  <div class="ui">
    <div class="overlay">
      <div class="hover-before">Before</div>
      <div class="hover-after">After</div>
    </div>
    <div class="scroller">
      <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <polygon points="0 50 37 68 37 32 0 50" style="fill:#fff" />
        <polygon points="100 50 64 32 64 68 100 50" style="fill:#fff" />
      </svg>
    </div>
  </div>
</div>

如果我遗漏了什么，请评论出来，我会尽快修复！

当触发 onmouseup 时，Vanilla JS before/after 滑块有问题 removing/adding 覆盖？

Vanilla JS before/after slider has issues removing/adding overlay when onmouseup is triggered?

html

javascript

css

slider

onmouseup