如何僅在第一次滾動時顯示 onscroll 事件？

Question

我有一個用作卡片的div標簽，我想讓滾動條僅在滾動時可見。 我已經使用狀態來做到這一點，但滾動條在每次滾動時都會閃爍。 任何人都可以幫我解決這個問題嗎？

這是 state 和handleScroll函數：

const [isScroll, setscroll] = useState(true)
    function handleScroll() {
        console.log("scroll detected")
        setscroll(!isScroll)
    }

這是我要應用滾動事件的div ：

<div className={`${description} ${isScroll ? des : ""}`} id={classes.des} onScroll={handleScroll}>

這是CSS：

.des::-webkit-scrollbar {
display: none;
}
.description {
background-color: $color-card-backgroung;

padding: 12px;
flex: 1;
height: 100%;
text-align: left;
overflow-y: scroll;

& > label:last-child {
    font-size: 1.125rem !important;
    color: $color-primary-7 !important;
}

& > label:nth-child(2) {
    margin-top: 16px;
}
}

Answer 1

在您的實現中，您將在每次滾動事件觸發時更新組件狀態並重新渲染，這種情況經常發生（請參閱https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event ） . 當您使用否定（ setscroll(!isScroll) ）更新狀態isScroll ，滾動將可見，然后每第二次觸發滾動事件時隱藏。 滾動事件以很高的速率觸發，這意味着這種情況會發生很多次。 當您為每個滾動事件重新渲染組件時，這也可能導致一些性能問題。

提高滾動事件性能的兩種常用方法是使用debounce或throttle 。 即使在該時間間隔內多次觸發事件，Debounce 也只會在指定的時間間隔內觸發一次回調。 Throttle 將每X毫秒觸發一次回調。 在您的情況下，我們可以在觸發第一個事件時將 scroll 設置為true ，然后在用戶停止滾動后的某個時間間隔內使用 debounce 隱藏滾動。 如果你想更好地理解它，你可以在這里找到一篇關於在 react 中去抖動的好文章： https : //dmittripavlutin.com/react-throttle-debounce/ 。 您可以使用lodash來獲取已實現的lodash版本 ( https://lodash.com/docs/4.17.15#debounce ) 或自行實現。

更新的實現解決您的問題可能如下所示：

import debounce from 'lodash-es/debounce'

const debouncedScrollHandler = useMemo(debounce(() => {
  setscroll(false)
}, 500), [])

const handleScroll = () => {
  if(!isScroll) {
    console.log("scroll detected")
    setscroll(true)
  }

  debouncedScrollHandler()
}

現在我們將在用戶開始滾動時立即將滾動設置為true ，並且在用戶停止滾動后 500 毫秒之前我們不會將其設置為 false。 可能在實現中遺漏了一些東西，但它應該為您指明正確的方向。