標簽[intersection-observer] - 堆棧內存溢出

[英]Check if element is outside window React

我正在嘗試創建一個代碼來檢查 div 元素是否在 window 之外。代碼的問題是它忽略了isOpen state 更新的結果，因此如果元素略微超出 window 屏幕則忽略。是否有機會進一步調整？用法：使用 Tailwind 分配 class ...

在正確的位置插入交叉觀察器以避免巨大的網絡負載

[英]Inserting an intesection observer in the right place in order to avoid an enormous network payload

我有一個來自外部 URL 的 mp3，通過<audio></audio>標簽。與在移動設備上一樣，在准備好播放之前需要幾秒鍾的時間下載，我添加了一個微調器，只有在 mp3 准備好播放時才會顯示播放器 - 所以如果還沒有聲音，沒有人會點擊播放。一切正常，除了 ENORMOU ...

IntersectionObserver 使用 data-srcset 和 imagekit.io 創建延遲加載圖像

[英]IntersectionObserver to create a lazy load Images with data-srcset and imagekit.io

我將 IntersectionObserver.js 與 data-srcset 一起使用來創建延遲加載，但每次瀏覽器選擇最大圖像時，圖像都沒有根據分辨率正確顯示...在這種情況下，它是寬度為 450 的圖像，忽略其他寬度（100px、200px、300px、400px）。這是用於延遲加載的 JS ...

IntersectionObserver 的根始終使用 getElementById null

[英]Root for IntersectionObserver using getElementById always null

在 Angular 項目中，我想將 IntersectionObserver 的視口限制為 DOM 的特定部分。我將元素定義為具有 id 的根：在相應的組件中，我使用getElementById定義根：但是登錄的根始終是null 。我做錯了什么？ ...

為什么回調沒有檢測到 class 實例變量的最新值

[英]Why callback not detecting latest value of class instance variable

我有一個 web 組件，它基本上是一個 class：如您所見，我有一個路口觀察器，我試圖在單擊錨點時禁用它的回調。觀察者檢測頁面上的元素並更改 URL hash 以便可見元素名稱在navlist上突出顯示，這工作正常但會干擾 navlist 的navlist因為單擊navlist條目也應該將頁面 ...

觀察可見性的高階組件：React？

[英]Higher Order Component to observe Visibility: React?

我創建了一個高階組件，如下所示：並像這樣使用它：但是，這會將每個組件包裝到我不想要的部分中。我嘗試使用React.Fragment但這不允許您傳遞 ref 來跟蹤組件。有沒有更好的方法來重新創建此 HOC，以便在不將其包裝在額外的 div 或部分中的情況下合並可見性跟蹤？ ...

在多個元素上反應 Intersection Observer

[英]React Intersection Observer on multiple elements

我有一個使用下面的 react-intersection-observer 的代碼： https://codesandbox.io/s/multiple-observe-elements-ieoh8u?file=/src/App.js 我試圖找出哪個是視圖中的當前圖像，當您向下滾動到同時顯示Im ...

javascript | 如何在用戶滾動一定量后觸發事件

[英]javascript | how to trigger an event after the user has scrolled by some amount

我希望在用戶滾動后觸發一個事件，比如在另一個事件發生后 300px。簡單地說，一個例子是：我希望用戶先按下一個按鈕，然后在他滾動一定量后按下按鈕，觸發一個事件，如果用戶沒有按下按鈕，那么事件也不會觸發。該按鈕可能位於視口中的任何位置，例如：滾動量應相對於按下按鈕的時間而不是從頁面的開頭開始考慮 ...

使用 Intersection Observer 時，是否可以在圖像出現在頁面上之前觸發交叉點？

[英]While using an Intersection Observer, is it possible to trigger an intersection before the image is on the page?

我目前正在實施延遲加載。如果沒有延遲加載，我的應用程序在顯示超過 100 張圖像時會出現嚴重的速度下降。所以解決方案是在圖像源可見時更改圖像源。但是，它觸發有點太晚了，因為一旦圖像相交，我就會加載圖像。它會引起一些閃爍，並且想知道我是否可以以某種方式弄亂 rootMargin，它會在它實際 ...

Intersection Observer + CSS Scroll Snap（根據基礎內容上的滾動 position 淡化修復 div）

[英]Intersection Observer + CSS Scroll Snap (fade fix div based on scroll position on underlying content)

我正在嘗試重新創建 Tesla.com 滾動捕捉/淡入淡出效果。我不得不承認我是一個完全的 JS 新手，並且不知道我在用它做什么。到目前為止，我設法讓滾動捕捉工作並在固定的 div 上淡入/淡出文本。問題是我不知道如何定位和設置不在視圖中的 div 的隱藏可見性。因此，這些層中的任何按鈕都 ...

[React][useInfiniteQuery] 如何限制第一次獲取調用僅在視圖在視口中可見時發生

[英][React][useInfiniteQuery] How to restrict the first fetch call to happen only when the view is visible in the viewport

我在我的組件中使用 useInfiniteQuery 掛鈎無限滾動項目。我希望第一次提取僅在視圖在視口中可見時發生。我正在使用 useInView/intersection observer 來查找視圖在視口中是否可見。我正在使用 useInView/intersection observer ...

在 intersectionObserver 中調用 function

[英]calling a function inside an intersectionObserver

我只想將此代碼稱為 IntersectionObserver 中的 function：我希望它可重復使用且更清潔，這樣我就可以隨處使用我的 IntersectionObserver ...

將元素滾動到視圖中 - 頂部導航

[英]Scroll element into view - top nav

我在片段中有這段代碼。這是一個路口觀察者，它跟蹤可見標題並將“活動”class 添加到頂部導航中相應的錨標記。我想知道 class“活動”的“li”元素是否也可以滾動到視圖中。我已經嘗試過 mutationObserver 但我似乎無法以任何方式使其工作。謝謝！ window.addEve ...

問題：十字路口觀察員 - Animation

[英]Question: Intersection Observer - Animation

我整個周末都在努力了解我想要實現的 animation 的 Intersection Observer Animation。根據我對路口觀察者的理解，我的代碼應該按我的預期工作，但事實並非如此我的目標是當元素到達視口內的某個點時滾動 animation 開始。在我的代碼筆中，我標記了 anim ...

State 在交叉點觀察者的回調 function 中的管理問題

[英]State management issue within intersectionObserver's callback function

我正在嘗試使用 state 管理當前頁面的索引，同時實現無限滾動。我寫了上面的代碼，但是useEffect運行了1次、2次、3次等，增加了1，state更新沒有正確完成。如果您能告訴我如何在 intersectionObserver 的回調 function 中引用和更新最新的 state 值， ...

如何為整個 App 的特定 Svelte 組件/元素設置 Intersection Observer？

[英]How to set Intersection Observer for a specific Svelte component/element for whole App?

假設我在/elements文件夾中有Icon.svelte組件。我已經在整個應用程序的各種其他組件中使用了該圖標組件。有沒有辦法為那個Icon組件設置交叉點觀察者？因此，當該組件進入 Viewport 時，它會安裝並在 Viewport 之外它會破壞！基本上認為這種方法可以提高應用程序的性 ...

Alpine 中具有視口邊距的交叉觀察器

[英]Intersection Observer with viewport margins in Alpine

問題：當元素進入視口的中間三分之一區域時需要執行一個動作：約束：我正在使用高山 JS 。根據Alpine intersect docs ，我可以使用.margin控制底層IntersectionObserver的rootMargin屬性，以更改觀察者將觸發的限制。我這樣做如下： h1 ...

動態 class 綁定在 Vue 中不起作用

[英]Dynamic class binding doesn't work in Vue

我正在使用 Vue2，並且在動態 class 綁定方面遇到了一些問題（在導航菜單欄中突出顯示用戶當前所在的當前部分名稱）。我正在使用我初始化的 Intersection ObserverAPI，並讓它從 mount() 生命鈎子中循環遍歷我的組件。但是，當我在觀察者中更新當前部分時：（完整代 ...

Intersection Observer API：回調 function 未在交叉路口觸發

[英]Intersection Observer API: Callback function is not triggered on intersection

有一個用於延遲加載的 Vue 自定義指令在本地注冊在 Vue 3 組件中回調 function handleIntersect不會在 Intersection 上觸發，當我在 DevTools 中檢查圖像時，圖像始終具有帶有圖像 url 的 data-src 但是，當我在指令中取消注釋調用loa ...

多個元素的相同 IntersectionObserver - 如何使用 classList.add() 正確定位相交元素

[英]Same IntersectionObserver for mutiple elements - how to properly target intersected element with classList.add()

我正在使用 Ziyad 和 Ruslan Korkin 提供的出色代碼，但是當我想在 entry.target 上使用 Classlist 時，我卡住了...... classList.add 或 classList.remove 無法按預期工作。在此代碼中元素相交的部分中，如何正確定位一個相交元 ...