如何为拖动和滚动添加平滑度

Question

我有一个也可以通过拖动滚动的水平滚动区域。我想为这个拖动和滚动添加平滑度，我的意思是我希望它在我离开拖动并缓慢停止后继续在 x 轴上移动。

这是整个场景的一小部分，因为它现在没有“平滑度”

const slider = document.querySelector(".wrapper");

      const preventClick = (e) => {

        e.preventDefault();

        e.stopImmediatePropagation();

      }

      let isDown = false;

      var isDragged = 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", e => {

        isDown = false;

        const elements = document.getElementsByClassName("book");

        if(isDragged){

            for(let i = 0; i<elements.length; i++){

                  elements[i].addEventListener("click", preventClick);

            }

        }else{

            for(let i = 0; i<elements.length; i++){

                  elements[i].removeEventListener("click", preventClick);

            }

        }

        slider.classList.remove("active");

        isDragged = false;

      });

      slider.addEventListener("mousemove", e => {

        if (!isDown) return;

        isDragged =  true;

        e.preventDefault();

        const x = e.pageX - slider.offsetLeft;

        const walk = (x - startX) * 2;

        slider.scrollLeft = scrollLeft - walk;

      });

      document.getElementsByClassName("book").ondragstart = function() {

        console.log("Drag start");

      };

.wrapper {

        position: relative;

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;

        overflow: auto;

        min-width: 100%;

      }

      .book {

        width: auto;

        height: 100vh;

        min-width: 50vw;

      }

      .one {

        background-color: #d07fe0;

      }

      .two {

        background-color: #808888;

      }

Answer 1

您可以添加一个velocity变量来说明每帧滚动了多少像素：let velocity = 0;slider.addEventListener("mousemove", e => {&nbsp; &nbsp; &nbsp; &nbsp; if (!isDown) return;&nbsp; &nbsp; &nbsp; &nbsp; isDragged =&nbsp; true;&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; let lastX = slider.scrollLeft;&nbsp; &nbsp; &nbsp; &nbsp; const x = e.pageX - slider.offsetLeft;&nbsp; &nbsp; &nbsp; &nbsp; const walk = (x - startX) * 2;&nbsp; &nbsp; &nbsp; &nbsp; slider.scrollLeft = scrollLeft - walk;&nbsp; &nbsp; &nbsp; &nbsp; velocity = lastX - slider.scrollLeft;&nbsp; &nbsp; &nbsp; });然后，您可以添加一个功能，在使用停止点击后继续移动内容：function smooth() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(velocity);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (Math.abs(velocity) > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (Math.abs(velocity) < 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; velocity = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (velocity > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; velocity&nbsp; -= 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; velocity += 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.scrollLeft -= velocity;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requestAnimationFrame(smooth);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }之后，调用 onmouseup 函数：&nbsp; &nbsp; slider.addEventListener("mousemove", e => {&nbsp; &nbsp; &nbsp; &nbsp; if (!isDown) return;&nbsp; &nbsp; &nbsp; &nbsp; isDragged =&nbsp; true;&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; let lastX = slider.scrollLeft;&nbsp; &nbsp; &nbsp; &nbsp; const x = e.pageX - slider.offsetLeft;&nbsp; &nbsp; &nbsp; &nbsp; const walk = (x - startX) * 2;&nbsp; &nbsp; &nbsp; &nbsp; slider.scrollLeft = scrollLeft - walk;&nbsp; &nbsp; &nbsp; &nbsp; velocity = lastX - slider.scrollLeft;&nbsp; &nbsp; &nbsp; });完整代码如下const slider = document.querySelector(".wrapper");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const preventClick = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.stopImmediatePropagation();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let isDown = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var isDragged = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let startX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let scrollLeft;&nbsp; &nbsp; &nbsp; let velocity = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.addEventListener("mousedown", e => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; velocity = 0; // Cancel previous velocity&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isDown = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.classList.add("active");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startX = e.pageX - slider.offsetLeft;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scrollLeft = slider.scrollLeft;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.addEventListener("mouseleave", () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isDown = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.classList.remove("active");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.addEventListener("mouseup", e => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isDown = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const elements = document.getElementsByClassName("book");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(isDragged){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(let i = 0; i<elements.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elements[i].addEventListener("click", preventClick);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(let i = 0; i<elements.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elements[i].removeEventListener("click", preventClick);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.classList.remove("active");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isDragged = false;&nbsp; &nbsp; &nbsp; requestAnimationFrame(smooth);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.addEventListener("mousemove", e => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!isDown) return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; isDragged =&nbsp; true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; let lastX = slider.scrollLeft;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const x = e.pageX - slider.offsetLeft;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const walk = (x - startX) * 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.scrollLeft = scrollLeft - walk;&nbsp; &nbsp; &nbsp; velocity = lastX - slider.scrollLeft;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementsByClassName("book").ondragstart = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("Drag start");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; function smooth() {&nbsp; &nbsp; &nbsp; &nbsp; if (Math.abs(velocity) > 0) {&nbsp; &nbsp; &nbsp; &nbsp; // Change the 2s here to change how quickly the scrolling stops&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (Math.abs(velocity) < 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; velocity = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (velocity > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; velocity&nbsp; -= 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; velocity += 2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slider.scrollLeft -= velocity;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requestAnimationFrame(smooth);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; .wrapper {&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; display: -webkit-box;&nbsp; &nbsp; &nbsp; display: -webkit-flex;&nbsp; &nbsp; &nbsp; display: -ms-flexbox;&nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; overflow: auto;&nbsp; &nbsp; &nbsp; min-width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; .book {&nbsp; &nbsp; &nbsp; &nbsp; width: auto;&nbsp; &nbsp; &nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; &nbsp; &nbsp; min-width: 50vw;&nbsp; &nbsp; }&nbsp; &nbsp; .one {&nbsp; &nbsp; &nbsp; &nbsp; background-color: #d07fe0;&nbsp; &nbsp; }&nbsp; &nbsp; .two {&nbsp; &nbsp; &nbsp; &nbsp;background-color: #808888;&nbsp; &nbsp; }&nbsp; &nbsp; .three {&nbsp; &nbsp; &nbsp; &nbsp;background-color: #83e7dc;&nbsp; &nbsp; }&nbsp; &nbsp; .four {&nbsp; &nbsp; &nbsp; &nbsp;background-color: #edf7a8;&nbsp; &nbsp; }&nbsp; &nbsp; .five {&nbsp; &nbsp; &nbsp; &nbsp;background-color: #e9d98f;&nbsp; &nbsp; }&nbsp; &nbsp; .six {&nbsp; &nbsp; &nbsp; &nbsp;background-color: #fdd;&nbsp; &nbsp; }<div class="wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/" class="book one"></a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/" class="book two"></a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/" class="book three"></a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/" class="book four"></a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/" class="book five"></a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/" class="book six"></a>&nbsp; &nbsp; &nbsp; </div>