javascript - 当 onmouseup 被触发时，Vanilla JS before/after 滑块有删除/添加覆盖的问题？

Question

我是 Javascript 新手，我一直在尝试在此处找到滑块之前/之后创建此滑块 - 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。我希望滑块在您打开时始终显示覆盖图像（即使单击时），然后当您在滚动条上时（即使单击时）覆盖消失。有人可以为此提供建议，因为我似乎只能修复一个并破坏其他？

标签： javascripthtmlcssslideronmouseup

Answer 1

如果我正确理解了这句话：“我希望滑块在您在图像上时（即使在单击时）始终显示覆盖，然后在您在滚动条上时（即使在单击时）消失。”

这可以通过对 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>

如果我错过了什么，只需将其评论出来，我会尽快修复！