JavaScript運(yùn)動(dòng)框架 解決防抖動(dòng)問(wèn)題、懸浮對(duì)聯(lián)(二)
本文實(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)前可見(jiàn)的客戶區(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í)有所幫助,也希望大家多多支持腳本之家。
- JavaScript函數(shù)防抖動(dòng)debounce
- 通過(guò)實(shí)例講解JS如何防抖動(dòng)
- JavaScript中防抖和節(jié)流的區(qū)別及適用場(chǎng)景
- JavaScript中防抖和節(jié)流的實(shí)戰(zhàn)應(yīng)用記錄
- JavaScript深入理解節(jié)流與防抖
- JavaScript防抖與節(jié)流的實(shí)現(xiàn)與注意事項(xiàng)
- JavaScript的防抖和節(jié)流一起來(lái)了解下
- JavaScript中函數(shù)的防抖與節(jié)流詳解
- javascript的防抖和節(jié)流你了解嗎
- 淺談JavaScript節(jié)流與防抖
- 關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實(shí)現(xiàn)
- JavaScript防抖與節(jié)流詳解
- JavaScript 防抖和節(jié)流詳解
- JavaScript防抖動(dòng)與節(jié)流處理
相關(guān)文章
wap手機(jī)端解決返回上一頁(yè)的js實(shí)例
下面小編就為大家?guī)?lái)一篇wap手機(jī)端解決返回上一頁(yè)的js實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12JS中數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm)實(shí)例詳解
排序也稱排序算法 (Sort Algorithm),排序是將 一組數(shù)據(jù) , 依指定的順序 進(jìn)行 排列的過(guò)程 。這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm),需要的朋友可以參考下2019-06-06HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解
這篇文章主要介紹了HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟
應(yīng)用uni-app開(kāi)發(fā)跨平臺(tái)App項(xiàng)目時(shí),上傳圖片、文檔等資源功能需求十分常見(jiàn),下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)篇之上傳圖片的相關(guān)資料,需要的朋友可以參考下2022-12-12