![](/img/trans.png)
[英]How to make one element disappear after you made another one appear using javascript. triggered by scrolling?
[英]How to make an element disappear after scrolling?
我有一個自定義圖標元素,只有當它在表中的特定行懸停時才會顯示,但是當我向下滾動而不移動鼠標時,它不會更新 hover 並保持屏幕上的按鈕和我表的 header 上方。我怎樣才能確保這不會發生?
export const StyleTr = styled.tr`
z-index: ${({ theme }) => theme.zIndex.userMenu};
&:hover {
background-color: ${({ theme, isData }) =>
isData ? theme.colors.primary.lighter : theme.colors.white};
div {
visibility: visible;
}
svg[icon] {
display: initial;
}
}
`;
我最近正在為 web 刮板做類似的事情。
這樣的事情應該有效:
function checkIfIconInViewport() { // define current viewport (maximum browser compatability use both calls) const viewportHeight = window.innerHeight || document.documentElement.clientHeight; //Get our Icon let icon = document.getElementById('icon'); let iPos = icon.getBoundingClientRect(); //Show if any part of icon is visible: if (viewportHeight - iPos.top > 0 && iPos.bottom > 0) { icon.style.visibility = visibile; } else { icon.style.visibility = hidden; } //Show only if all of icon is visible: if (iPos.bottom > 0 && iPos.top >= 0) { { icon.style.visibility = visibile; } else { icon.style.visibility = hidden; } //Add && iPos.bottom <= viewportHeight to the if check above for very large elements. { //Run function everytime that the window is scrolled. document.addEventListener('scroll', checkIfIconInViewport);
基本上,每次發生滾動事件時,我們只檢查元素的頂部和底部(您的情況下的圖標)是否在視口范圍內。
負值或大於視口高度的值表示元素的相應部分位於視口邊界之外。
如果您正在處理大量對象,希望這會有所幫助。 將您正在跟蹤的對象捆綁到一個數組中並在單個 function 調用中檢查每個對象以避免為每個單獨的對象保存 function 定義可能是有意義的。
編輯:我剛剛意識到我誤解了你的問題。 我想你可以只用代碼的底部,當滾動事件發生時,將圖標的可見性設置為隱藏。 假設您想在用戶滾動時隱藏它?
您是否嘗試過獲取 DOM 的滾動條 position,然后在達到某個滾動條 position 后禁用(刪除)該元素?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.