Drag to scroll on horizontal webpage JS-CodePudding

I am trying to create a horizontal style website that allows users to have horizontal scroll, as well as horizontal drag to scroll.

I was able to achieve the horizontal scroll in the website, but am struggling to add horizontal drag to scroll. If you're unsure of what that means, you simply drag the screen to move it horizontally. Here is an example.

For some reason, the JS does not move the screen with dragging, but will move with screening as you can see in the reproducible example.

My code:

// script.js

const slider = document.querySelector('.wrapper');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

/* style.css */

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  overflow: hidden;
  cursor: pointer;
}


.wrapper.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.slide {
  width: 100vw;
  height: 100vh;
}

.one {
  background: #efdefe;
}
.two {
  background: #a3f3d3;
}
.three {
  background: #0bbaa0;
}
.four {
  background: #00dfdf;
}

::-webkit-scrollbar {
  display:none;
}

<!-- index.html -->

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodePen - GLTF Model Loading (.glb / .gltf)</title>
  <link rel="stylesheet" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body id="homePage">



  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="slide one"></div>
      <div class="slide two"></div>
      <div class="slide three"></div>
      <div class="slide four"></div>
    </div>
  </div>

<script src="script.js"></script>

</body>
</html>

CodePudding user response：

Look like wrong variable you need select outer and scrollTop not scrollLeft You can follow this solition:

var slider = document.querySelector('.wrapper');
var outer = document.querySelector('.outer-wrapper');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;

  outer.scrollTop = startX;
});
slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  slider.scrollLeft = startX;
  console.log(walk);
    outer.scrollTop = x;
});

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-x: hidden;
  position: absolute;
}

.wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  overflow-x: hidden;
  cursor: pointer;
}


.wrapper.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.slide {
  width: 100vw;
  height: 100vh;
}

.one {
  background: #efdefe;
}
.two {
  background: #a3f3d3;
}
.three {
  background: #0bbaa0;
}
.four {
  background: #00dfdf;
}
::-webkit-scrollbar {
  display:none;
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodePen - GLTF Model Loading (.glb / .gltf)</title>
  <link rel="stylesheet" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body id="homePage">



  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="slide one"></div>
      <div class="slide two"></div>
      <div class="slide three"></div>
      <div class="slide four"></div>
    </div>
  </div>

<script src="sliderScript.js"></script>

</body>
</html>