javascript - 可拖动 div 来控制溢出 div

Question

document.getElementsByClassName('barPos')[0].addEventListener("click", ()=>{
	document.getElementsByClassName('wrap')[0].style.right = '305px'
  document.getElementsByClassName('barPos')[0].style.left = '300px'
});

.outter {
	 display: flex;
	 flex-direction: row;
	 justify-content: flex-start;
	 overflow: hidden;
	 overflow-x: visible;
	 width: 450px;
	 border: 3px solid green;
}
 .wrap {
	 display: flex;
	 flex-direction: row;
	 justify-content: flex-start;
	 width: 450px;
	 position: relative;
	 right: 0;
}
 .box {
	 width: 150px;
	 height: 150px;
	 border: 1px solid blue;
	 flex: 0 0 150px;
	 font-size: 2rem;
	 color: white;
}
 .box1 {
	 background-color: #ff401e;
}
 .box2 {
	 background-color: #f42500;
}
 .box3 {
	 background-color: #cc1f00;
}
 .box4 {
	 background-color: #a31900;
}
 .box5 {
	 background-color: #7a1300;
}
 .bar {
	 margin-top: 10px;
	 width: 450px;
	 height: 30px;
	 background-color: lightblue;
}
 .bar .barPos {
	 width: 35%;
	 height: 100%;
	 background-color: purple;
	 position: relative;
	 left: 0;
}
 

<div class="outter">
  <div class="wrap">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
  </div>
</div>

<div class="bar">
  <div class="barPos"></div>
</div>

示例如下:https://jsfiddle.net/jrf902k4/1/

点击工作正常，因为我想让点击成为可拖动，我发现这个拖动https:///developer.mozilla.org/en-US/docs/Web/API/Document/drag_event 与预期的滚动条拖动完全不同，我可以提供一些建议吗？谢谢

Answer 1

基于ToddWebDew's project ;

const slider = document.querySelector('.outter');
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) * 1; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

.outter {
	 display: flex;
	 flex-direction: row;
	 justify-content: flex-start;
	 overflow: hidden;
	 overflow-x: visible;
	 width: 450px;
	 border: 3px solid green;
}
 .wrap {
	 display: flex;
	 flex-direction: row;
	 justify-content: flex-start;
	 width: 450px;
	 position: relative;
	 right: 0;
}
 .box {
	 width: 150px;
	 height: 150px;
	 border: 1px solid blue;
	 flex: 0 0 150px;
	 font-size: 2rem;
	 color: white;
}
 .box1 {
	 background-color: #ff401e;
}
 .box2 {
	 background-color: #f42500;
}
 .box3 {
	 background-color: #cc1f00;
}
 .box4 {
	 background-color: #a31900;
}
 .box5 {
	 background-color: #7a1300;
}
 .bar {
	 margin-top: 10px;
	 width: 450px;
	 height: 30px;
	 background-color: lightblue;
}
 .bar .barPos {
	 width: 35%;
	 height: 100%;
	 background-color: purple;
	 position: relative;
	 left: 0;
}
 

<div class="outter">
  <div class="wrap">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
  </div>
</div>

<div class="bar">
  <div class="barPos"></div>
</div>

fiddle :https://jsfiddle.net/x5f4q730/