頁面元素焦點滾動效果

2021-10-04 05:23:06 字數 2883 閱讀 9766

scroll()

)//此方案滾動效果很好,但在低端安卓(4.x)上有相容性問題,options不被識別,只識別true/false;

}_scroll()

`})}

},//方案a在安卓4.4.4機器上scrolltop()獲取的值總是0,導致焦點切換時頁面顯示不對,最終改為用非html/body的根元素做基準,但效果略顯示卡頓,有時間時再看下優化空間

_scroll()

, elh:

$, delta:

$, base.scrolltop(): $`

) delta && base.

animate(`

})console.

log(

`el

$, base.scrolltop(): $`

)},//以下方法參考自 ttps:

//但移動時略微卡頓,猜測是 offset()方法計算座標時比較花時間,

_scroll()

)let base =$(

'html,body'),

bh = base.

height()

,//視窗高度

elh =$(

this).

height()

//當前元素高度

//offset() 方法設定或返回被選元素相對於文件的偏移座標。

console.

time()

var weizhi =$(

this).

offset()

.top -

(bh - elh)/2

; base.

animate(,

1000);

console.

timeend()

},//方案b 抓取的移動時間,在chrome上對比方案a資料一致,但不知為什麼方案b會有明顯卡頓? 待探索

default

:0.679931640625ms

index.js:

36default

:0.34326171875ms

index.js:

36default

:0.467041015625ms

index.js:

36default

:0.385009765625ms

index.js:

36default

:0.35009765625ms

index.js:

36default

:0.322998046875ms

index.js:

36default

:0.43408203125ms

index.js:

36default

:0.0400390625ms

index.js:

36default

:0.27392578125ms

index.js:

36default

:0.315185546875ms

index.js:

36default

:0.280029296875ms

index.js:

36default

:0.031005859375ms

index.js:

36default

:0.06494140625ms

//方案a

//default

:0.77490234375ms

index.js:

38default

:0.688232421875ms

index.js:

38default

:0.55419921875ms

index.js:

38default

:0.56103515625ms

index.js:

38default

:0.619140625ms

index.js:

38default

:0.428955078125ms

index.js:

38default

:0.2119140625ms

index.js:

38default

:0.556884765625ms

index.js:

38default

:0.6669921875ms

index.js:

38default

:0.53076171875ms

index.js:

38default

:0.187255859375ms

index.js:

38default

:0.235107421875ms

index.js:

38default

:0.25830078125ms

index.js:

38default

:0.3740234375ms

index.js:

38default

:0.3359375ms

index.js:

38default

:0.2861328125ms

index.js:

38default

:0.39599609375ms

index.js:

38default

:0.18701171875ms

index.js:

38default

:0.282958984375ms

index.js:

38default

:0.220947265625ms

頁面滾動視差效果的實現

今天在發現乙個視差滾動的例子,想自己實現一下視差效果。開啟例子 首先呢,我們可以選擇監聽scroll和mousewheel事件,說說各自的優缺點。scroll 優點 當頁面滾動到邊界時,不會觸發事件。缺點 需要自己判斷滑鼠滾動方向。mousewheel 優點 可以直接知道滾動方向。缺點 當到達頁面邊...

Selenium 滾動頁面至元素可見

在自動化操作中,如果web頁面過長,而我們需要的元素並不在當前可視頁面中,那麼selenium就無法對其進行操作 此時,我們就需要像平時操作瀏覽器一樣來滾動頁面,使我們需要操作的物件可見!滾動頁面的方法 使用方式 示例 from selenium import webdriver import ti...

jQuery實現頁面錨點滾動效果

核心 html,body animate 1500 讓滾動條在指定時間內,滾動到指定元素的位置。scrolltop 相對滾動條頂部的偏移 offset獲取元素偏移量.top表示獲取元素距離頂端的位置,left表示獲取元素距離左側的位置 第一章第二章 第三章第一章 第一章節內容 第一章節內容 第一章節...