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

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 => {

        if (!isDown) return;

        isDragged =  true;

        e.preventDefault();

        let lastX = slider.scrollLeft;

        const x = e.pageX - slider.offsetLeft;

        const walk = (x - startX) * 2;

        slider.scrollLeft = scrollLeft - walk;

        velocity = lastX - slider.scrollLeft;

      });

然后，您可以添加一个功能，在使用停止点击后继续移动内容：

function smooth() {

              console.log(velocity);

          if (Math.abs(velocity) > 0) {

              if (Math.abs(velocity) < 2) {

                  velocity = 0;

              }

              if (velocity > 0) {

                velocity  -= 2;

              }

              else {

                velocity += 2;

              }

              slider.scrollLeft -= velocity;

              requestAnimationFrame(smooth);

          }

      }

之后，调用 onmouseup 函数：

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

        if (!isDown) return;

        isDragged =  true;

        e.preventDefault();

        let lastX = slider.scrollLeft;

        const x = e.pageX - slider.offsetLeft;

        const walk = (x - startX) * 2;

        slider.scrollLeft = scrollLeft - walk;

        velocity = lastX - slider.scrollLeft;

      });

完整代码如下

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

          const preventClick = (e) => {

            e.preventDefault();

            e.stopImmediatePropagation();

          }

          let isDown = false;

          var isDragged = false;

          let startX;

          let scrollLeft;

      let velocity = 0;

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

            velocity = 0; // Cancel previous velocity

            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;

      requestAnimationFrame(smooth);

          });

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

            if (!isDown) return;

            isDragged =  true;

            e.preventDefault();

      let lastX = slider.scrollLeft;

            const x = e.pageX - slider.offsetLeft;

            const walk = (x - startX) * 2;

            slider.scrollLeft = scrollLeft - walk;

      velocity = lastX - slider.scrollLeft;

          });

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

            console.log("Drag start");

          };

      function smooth() {

        if (Math.abs(velocity) > 0) {

        // Change the 2s here to change how quickly the scrolling stops

          if (Math.abs(velocity) < 2) {

            velocity = 0;

          }

          if (velocity > 0) {

          velocity  -= 2;

          }

          else {

          velocity += 2;

          }

              slider.scrollLeft -= velocity;

          requestAnimationFrame(smooth);

        }

      }

    .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;

    }

    .three {

       background-color: #83e7dc;

    }

    .four {

       background-color: #edf7a8;

    }

    .five {

       background-color: #e9d98f;

    }

    .six {

       background-color: #fdd;

    }

<div class="wrapper">

        <a href="https://stackoverflow.com/" class="book one"></a>

        <a href="https://stackoverflow.com/" class="book two"></a>

        <a href="https://stackoverflow.com/" class="book three"></a>

        <a href="https://stackoverflow.com/" class="book four"></a>

        <a href="https://stackoverflow.com/" class="book five"></a>

        <a href="https://stackoverflow.com/" class="book six"></a>

      </div>