簡體   English   中英

如何讓一個元素在滾動后消失?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM