JS is blocking form

Question

I have found this JS script and I am trying to use it but it is blocking my forms inputs on whole project.

By blocking, I mean they react on hover and everything but when I click them, they don't go to "active" state and I cant type in them.

I have found out that this script is working "globally'. I mean I can grab and scroll in whathever point of website I want, not only on the divs that should be "grabable"

Script is giving user aviability to grab an scroll horizontall gallery like a slider - without scrolling background or website.

Is there any solutions to unblock my forms?

const lerp = (f0, f1, t) => (1 - t) * f0 + t * f1;
const clamp = (val, min, max) => Math.max(min, Math.min(val, max));

class DragScroll {
  constructor(obj) {
    this.$el = document.querySelector(obj.el);
    this.$wrap = this.$el.querySelector(obj.wrap);
    this.$items = this.$el.querySelectorAll(obj.item);
    this.$bar = this.$el.querySelector(obj.bar);
    this.init();
  }

  init() {
    this.progress = 0;
    this.speed = 0;
    this.oldX = 0;
    this.x = 0;
    this.playrate = 0;
    //
    this.bindings();
    this.events();
    this.calculate();
    this.raf();
  }

  bindings() {
    [
    'events',
    'calculate',
    'raf',

    'move',
    'raf',
    'handleTouchStart',
    'handleTouchMove',
    'handleTouchEnd'].
    forEach(i => {this[i] = this[i].bind(this);});
  }

  calculate() {
    this.progress = 0;
    this.wrapWidth = this.$items[0].clientWidth * this.$items.length;
    this.$wrap.style.width = `${this.wrapWidth}px`;
    this.maxScroll = this.wrapWidth - this.$el.clientWidth;
  }

  handleWheel(e) {
    this.progress += e.deltaY;
    this.move();
  }

  handleTouchStart(e) {
    e.preventDefault();
    this.dragging = true;
    this.startX = e.clientX || e.touches[0].clientX;
    this.$el.classList.add('dragging');
  }

  handleTouchMove(e) {
    if (!this.dragging) return false;
    const x = e.clientX || e.touches[0].clientX;
    this.progress += (this.startX - x) * 2.5;
    this.startX = x;
    this.move();
  }

  handleTouchEnd() {
    this.dragging = false;
    this.$el.classList.remove('dragging');
  }

  move() {
    this.progress = clamp(this.progress, 0, this.maxScroll);
  }

  events() {
    window.addEventListener('resize', this.calculate);
    window.addEventListener('wheel', this.handleWheel);
    //
    this.$el.addEventListener('touchstart', this.handleTouchStart);
    window.addEventListener('touchmove', this.handleTouchMove);
    window.addEventListener('touchend', this.handleTouchEnd);
    //
    window.addEventListener('mousedown', this.handleTouchStart);
    window.addEventListener('mousemove', this.handleTouchMove);
    window.addEventListener('mouseup', this.handleTouchEnd);
    document.body.addEventListener('mouseleave', this.handleTouchEnd);
  }

  raf() {
    // requestAnimationFrame(this.raf)
    this.x = lerp(this.x, this.progress, 0.1);
    this.playrate = this.x / this.maxScroll;
    //
    this.$wrap.style.transform = `translateX(${-this.x}px)`;
    this.$bar.style.transform = `scaleX(${.18 + this.playrate * .82})`;
    //
    this.speed = Math.min(100, this.oldX - this.x);
    this.oldX = this.x;
    //
    this.scale = lerp(this.scale, this.speed, 0.1);
    this.$items.forEach(i => {
      i.style.transform = `scale(${1 - Math.abs(this.speed) * 0.002})`;
      i.querySelector('img').style.transform = `scaleX(${1 + Math.abs(this.speed) * 0.004})`;
    });
  }}



/*--------------------
Instances
--------------------*/
const scroll = new DragScroll({
  el: '.carousel',
  wrap: '.carousel--wrap',
  item: '.carousel--item',
  bar: '.carousel--progress-bar' });



/*--------------------
One raf to rule em all
--------------------*/
const raf = () => {
  requestAnimationFrame(raf);
  scroll.raf();
};
raf();

#circle {
  position: fixed;
  border-radius: 50%;
  z-index: 99;
  height: 32px;
  width: 32px;
  background-color: white;
  pointer-events: none;
  transition: 0.15s;
    opacity: 0;

  /* Promote it to its own layer to enable  hardware accelerated rendering: */
  transform: translate3d(0, 0, 0);
}



#services-panel{
  width: 100vw;
  height: 600px;
  padding-top: 100px;
  background-color: #171717;
    display: flex;
      justify-content: center;
        align-items: center;
          overflow: hidden;
          z-index: 2 !important;
          background-image: url("../images/map.png");
    background-size: 900px;
          background-repeat: no-repeat;
          background-position: left center;
          padding-bottom: 100px;
          cursor: none;
}

#services-panel:hover  #circle {
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  opacity: 1;
  height: 64px;
  width: 64px;
  background-image: url("../images/stretch.png");
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: center;
}


#services-check
{
  position:absolute;
  min-width: 400px;
  color: white;
  font-size: 80px;
  left: 220px;
  text-align: center;
  font-weight: bold;
  transform: translateY(-30px);
  opacity: 0.9;
}

#services-check p {
    font-size: 16px;
}


.carousel {
  width: 100%;
  cursor: none;
  transform: translateX(50%);
}




.carousel.dragging {
  cursor: none;
}
.carousel--wrap {
  white-space: nowrap;
}
.carousel--item {
  display: inline-block;
  width: 30vw;
  padding: 3vw;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.carousel--item figure {
  position: relative;
  z-index: 1;
  display: block;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.carousel--item figure img {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
  transform-origin: center;
  filter: brightness(0.7);
}
.carousel--item h2 {
  position: absolute;
  z-index: 1;
  bottom: 1.8vw;
  font-size: 5vw;
  bottom: 1vw;
  color: #fff;
}

.carousel-span {
  position: relative;
    z-index: 2;
}
.carousel-span::after {
  margin-left: -1%;
  content: ' ';
  position: absolute;
  top: 60%;
  left: 0;
  width: 102%;
  height: 30%;
  background:#ff6f00;
  opacity: 0.9;
  z-index: -1;
}


.carousel--item h3 {
  position: absolute;
  z-index: 1;
  bottom: 1.8vw;
  font-size: 3vw;
  bottom: 1vw;
  color: #fff;
}
.carousel--progress {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  bottom: 2vw;
  width: 20vw;
  left: 3vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.0);
}
.carousel--progress-bar {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.0);
  transform: scaleX(0);
  transform-origin: 0% 0%;
}

#services-panel:hover  #circle {
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  opacity: 1;
  height: 64px;
  width: 64px;
  background-image: url("../images/stretch.png");
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: center;
}


#services-check
{
  position:absolute;
  min-width: 400px;
  color: white;
  font-size: 80px;
  left: 220px;
  text-align: center;
  font-weight: bold;
  transform: translateY(-30px);
  opacity: 0.9;
}

#services-check p {
    font-size: 16px;
}


.carousel {
  width: 100%;
  cursor: none;
  transform: translateX(50%);
}




.carousel.dragging {
  cursor: none;
}
.carousel--wrap {
  white-space: nowrap;
}
.carousel--item {
  display: inline-block;
  width: 30vw;
  padding: 3vw;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.carousel--item figure {
  position: relative;
  z-index: 1;
  display: block;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.carousel--item figure img {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
  transform-origin: center;
  filter: brightness(0.7);
}
.carousel--item h2 {
  position: absolute;
  z-index: 1;
  bottom: 1.8vw;
  font-size: 5vw;
  bottom: 1vw;
  color: #fff;
}

.carousel-span {
  position: relative;
    z-index: 2;
}
.carousel-span::after {
  margin-left: -1%;
  content: ' ';
  position: absolute;
  top: 60%;
  left: 0;
  width: 102%;
  height: 30%;
  background:#ff6f00;
  opacity: 0.9;
  z-index: -1;
}


.carousel--item h3 {
  position: absolute;
  z-index: 1;
  bottom: 1.8vw;
  font-size: 3vw;
  bottom: 1vw;
  color: #fff;
}
.carousel--progress {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  bottom: 2vw;
  width: 20vw;
  left: 3vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.0);
}
.carousel--progress-bar {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.0);
  transform: scaleX(0);
  transform-origin: 0% 0%;
}

 



Nasza oferta 
nie ma granic.

  

    
      
        
        Leasing
      

      
        
        Outsourcing
      

      
        
        Rekrutacja
      

      
        
        Legalizacja 
 Zatrudnienia
      

      
        
        Szkolenia 
 Pracowników
      

      
        
        Koordynacja
      

      
        
        Ochrona przed 
 Rotacją pracowniczą
      

      
        
        Wsparcie HR
      

      
        
        Porozmawiajmy 
 +48 790 880 228

JS is blocking form

0 Answers