亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何為拖動和滾動添加平滑度

如何為拖動和滾動添加平滑度

慕的地8271018 2021-11-18 16:58:52
我有一個也可以通過拖動滾動的水平滾動區域。我想為這個拖動和滾動添加平滑度,我的意思是我希望它在我離開拖動并緩慢停止后繼續在 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;      }
查看完整描述

1 回答

?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

您可以添加一個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>


查看完整回答
反對 回復 2021-11-18
  • 1 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號