JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)

發(fā)布時(shí)間：2021-08-02 14:17:15 來源：億速云閱讀：104 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)”這篇文章吧。

scrollTop：有時(shí)候網(wǎng)頁很長(zhǎng)，其高度大于顯示器高度，會(huì)產(chǎn)生滾動(dòng)，那么在高度方向上，“滾走”的部分就是scrollTop

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

offsetTop：此屬性可以獲取元素的上外緣距離最近采用定位父元素內(nèi)壁的距離，如果父元素中沒有采用定位的，則是獲取上外邊緣距離文檔內(nèi)壁的距離。所謂的定位就是position屬性值為relative、absolute或者fixed。

JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)

圖中，黑色框是網(wǎng)頁文檔，其高度：document.documentElement.scrollHeight;

綠色框是當(dāng)前可見的客戶區(qū)部分（不包括工具條，狀態(tài)欄之類的），紅色方框是要固定在客戶區(qū)正中央的對(duì)聯(lián)，假如網(wǎng)頁高度很高，用戶不停的滾動(dòng)，要求對(duì)聯(lián)以緩沖運(yùn)動(dòng)的形式保持在客戶區(qū)右側(cè)中央，（postion:fixed;可以做到，而且非常穩(wěn)定的做到，滾動(dòng)網(wǎng)頁，div紋絲不動(dòng)的焊在那里）。

但我們想讓它運(yùn)動(dòng)性的最后落腳在目標(biāo)位置：

1：可以直接計(jì)算好位置，硬賦值；
2：緩沖運(yùn)動(dòng)到目標(biāo)位置，效果更柔和。
一般不用第一種硬來，因?yàn)橐曈X效果很差，很生硬。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>運(yùn)動(dòng)框架（二）</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  #div1 {
   width: 100px;
   height: 200px;
   background: orange;
   position: absolute;
   right: 0;
  }
 </style>
</head>
<body >
 <div id="div1"></div>
 <script type="text/javascript">
  var oDiv = document.getElementById('div1');
  var timer = null;
  window.onscroll = function() {
   //每次滾動(dòng)網(wǎng)頁，都要重新計(jì)算目標(biāo)值，當(dāng)前值就是offsetTop
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   var target = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;
   //下面是硬賦值,計(jì)算好位置后，直接將值付給style.top,太生硬
   //oDiv.style.top = target;

   startMove(target);
  };
  function startMove(iTarget) {
   clearInterval(timer);
   timer = setInterval(function() {
    var speed = (iTarget - oDiv.offsetTop) / 10;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (iTarget == oDiv.offsetTop) {
     clearInterval(timer);
    } else {
     oDiv.style.top = oDiv.offsetTop + speed + 'px';
     document.title = iTarget + ',' + oDiv.offsetTop;
    }
   }, 30);
  }
 </script>
</body>
</html>

運(yùn)行結(jié)果卻有問題，對(duì)聯(lián)不停地抖動(dòng)，一上一下的抖動(dòng)，也就是offsetTop不停的來回變化，如下兩個(gè)圖所示：

JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)

觀察上面兩個(gè)圖，看title，計(jì)算出來的目標(biāo)值是小數(shù)：267.5px，也就是對(duì)聯(lián)最后應(yīng)該停留的style.top值，speed = (267.5 - 267)/10 –> 1 , 跨1px到 268，
speed = (267.5 - 268)/10 –> -1，退1px，到267，始終到不了267.5的目標(biāo)值，上一篇文章中讓速度只能取整，并且計(jì)算機(jī)也不走小數(shù)個(gè)px，所以始終到不了267.5，就這么僵持著：跨一步，過了，退一步，狠了！來回抖動(dòng)！
怎么解決，很簡(jiǎn)單，不允許目標(biāo)值是個(gè)小數(shù)：取整！

var target = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;

改為：

var target = parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);

以上是“JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)