У Vanilla JS до / после ползунка есть проблемы с удалением / добавлением оверлея при запуске onmouseup?

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 кода, который я определил как проблемную область. Все в слайдере работает должным образом, за исключением того, что при нажатии на любое из изображений наложение исчезает. Я обнаружил, что проблема вызвана разделом «mouseup» в Javascript, и попытался добавить дополнительные переменные или изменить оператор 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, либо изображение удаляет его на mouseup. Я бы хотел, чтобы ползунок всегда отображал наложение, когда вы находитесь на изображения (даже при нажатии), а затем исчезает наложение, когда вы находитесь на скроллере (даже при нажатии). Может ли кто-то предложить предложение для этого, так как мне кажется, что я могу только исправить одно и сломать другой

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>

Если я что-то пропустил, просто закомментируйте это, и я исправлю как можно скорее!