使用 javascript 的可拖动 flexbox 滑块可以工作但会抖动答案

【问题标题】：Draggable flexbox slider using javascript works but shakes使用 javascript 的可拖动 flexbox 滑块可以工作但会抖动
【发布时间】：2020-11-13 09:40:45
【问题描述】：

我正在处理一个 flexbox 滑块，但 js 运行不顺畅。拖动功能接近我想要的效果，但拖动时内容会四处跳动/摇晃。不知道问题出在 js 上还是因为与 CSS 冲突。或者也许我应该使用不同的事件监听器？

js的最后一块是拖动功能。谢谢

let container = document.querySelector('.container');
let sliderWrapper = document.querySelector('.slider-wrapper');

let pressed = false;
let startx;
let x;

container.addEventListener('mousedown', (e)=>{
  pressed = true;
  startx = e.offsetX - sliderWrapper.offsetLeft;
  container.style.cursor = 'grabbing'
});

container.addEventListener('mouseenter', ()=>{
  container.style.cursor = 'grab'
});

container.addEventListener('mouseup', ()=>{
  container.style.cursor = 'grab'
});

window.addEventListener('mouseup',()=>{
  pressed = false;
});

container.addEventListener('mousemove', (e)=>{
  if(!pressed) return;
  e.preventDefault();

  x = e.offsetX

  sliderWrapper.style.left = `${x - startx}px`;
});

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
}

.gallery {
  position: relative;
  height: calc(100vh - 200px);
  width: 90vw;
  left: 05vw;
  top: 100px;
  overflow-x: hidden;
}

.container {
  height: inherit;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.slider-wrapper{
  display: flex;
  position: absolute;
  height: inherit;
}

.swiper-slide {
  height: 100%;
  pointer-events: none;
}

.element{
  height: 100%;
}

<body>
  <div class="gallery">
    <div class="container">
      <div class="slider-wrapper">
        <div class="swiper-slide">
          <img class="element" src="https://via.placeholder.com/150/f19.png/mmm">
        </div>
        <div class="swiper-slide">
          <img class="element" src="https://via.placeholder.com/300/f71.png/mmm">
        </div>
        <div class="swiper-slide">
          <img class="element" src="https://via.placeholder.com/300/09f.png/mmm">
        </div>
      </div>
    </div>
  </div>
  <script src="slider.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript html css flexbox

【解决方案1】：

我并不是说我喜欢你的代码，或者会像你的梦想一样神奇地工作，但是将 x = e.offsetX 更改为 x = e.clientX 对我有用。

【讨论】：

谢谢，确实解决了。你知道为什么我的函数不能使用偏移量吗？
e.offsetX 给出的是整数值而不是双精度值，在我看来不应该这样做，但这是一项实验性技术......所以我无论如何都不会使用它。