html css 滾動到元素位置，顯示載入動畫

每次滾動到元素時，都顯示載入動畫，如何新增？ 

以上圖中的動畫為例，新增倆個左右容器，將內容放置在容器內部。

新增初始資料，預設透明度0、左右分別移動100px。 

//左側容器

.item-leftcontainer 
//右側容器
.item-rightcontainer

執行後，透明度由0到1，倆個容器向中間移動100px回到原處。

//動畫

@keyframes showleft 
}  @keyframes showright 
}  @keyframes hideleft 
}  @keyframes hideright 
}

頁面滾動時觸發 - 在componentdidmount、componentwillunmount新增監聽/登出頁面滾動的事件

校驗當前滾動高度與元素的位置差異：

window.pageyoffset（滾動距離） + windowheight（視窗高度） > leftelement.offsettop （元素的相對位置）+ parentoffsettop（父元素的相對位置） + 200

真正的滾動視覺位置 - window.pageyoffset（滾動距離） + windowheight（視窗高度）

元素距離頂部的高度 - 這裡使用了leftelement.offsettop + parentoffsettop，原因是父容器使用了absolute絕對定位。如果是正常布局的話，使用元素當前的位置leftelement.offsettop即可

額外新增200高度，是為了優化視覺體驗。當超出200高度時才觸發動畫

當頁面滾動到下方，觸發顯示動畫；當頁面重新滾動到上方，觸發隱藏動畫。

componentdidmount() 

componentwillunmount() 
bindhandlescroll = (event) => 
checkscrollheightandloadanimation()  else 
let rightelement = (parenteelement.getelementsbyclassname(".item-rightcontainer") as htmlcollectionof)[0];
if (window.pageyoffset + windowheight > rightelement.offsettop + parentoffsettop + 200)  else 
}

js滾動到指定位置

向上的滾動距離，或者說滾動出可視區域的距離 獲得滾動的畫素數 var intelemscrolltop someelement.scrolltop 設定滾動的距離 element.scrolltop intvalue scrolltop賦值為負數的時候，scrolltop賦值為0 如果乙個元素不能滾...

jQuery滾動到頁面指定位置

在前端的頁面開發中，經常會碰到頁面跳轉問題，這個跳轉指的是頁面內部跳轉到指定位置，通常是在有滾動條的情況下，網上介紹的方法很多，本文主要是介紹jquery函式中的乙個小trick，focus 函式。先來看一下jquery的官方文件 上面的文件扯了一堆，半點沒看到頁面跳轉的影子，但是在實際應用中你會發...

RecyclerView滾動到指定位置的一種姿勢。

其實這個問題沒有什麼難度了，下面的兩種方式都可以實現，但是效果可能並不是我想要的。recyclerview.scrolltoposition position recyclerview.smoothscrolltoposition position 因為我的效果是想要指定的position滑動到視窗...