快捷導(dǎo)航

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

更新時(shí)間：2022年05月08日 10:47:47 作者：GY_U_YG

這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動(dòng)框架的第二部分，解決防抖動(dòng)問(wèn)題、懸浮對(duì)聯(lián)問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例是對(duì)JavaScript運(yùn)動(dòng)框架（一）的應(yīng)用

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

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

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

這里寫圖片描述

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

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

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

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

<!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 style="height: 30000000px;">
 <div id="div1"></div>
 <script type="text/javascript">
  var oDiv = document.getElementById('div1');
  var timer = null;
  window.onscroll = function() {
   //每次滾動(dòng)網(wǎng)頁(yè)，都要重新計(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é)果卻有問(wèn)題，對(duì)聯(lián)不停地抖動(dòng)，一上一下的抖動(dòng)，也就是offsetTop不停的來(lái)回變化，如下兩個(gè)圖所示：

這里寫圖片描述

觀察上面兩個(gè)圖，看title，計(jì)算出來(lái)的目標(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，就這么僵持著：跨一步，過(guò)了，退一步，狠了！來(lái)回抖動(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);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: