от
С помощью наблюдателя пересечения довольно легко определить, когда весь элемент находится в области просмотра. Код примерно так:
// get an element
const thingIWantEntirelyInView = $("#Thing")[0];  

const checkInView = new IntersectionObserver((event) => {
  console.log("It's in view");
}, {
  root: null, // viewport
  threshold: 1.0,
});
checkInView.observe(thingIWantEntirelyInView);
Что я не могу понять, так это то, как перевернуть его, чтобы оно не было похожим на сдерживание и больше походило на укрытие. Я хочу знать, когда мой элемент (который больше, чем область просмотра) полностью покрывает экран. Я попытался поменять местами
null
и
thingIWantEntirelyInView
выше, но это не сработало. Я также попытался добавить элемент фиксированного положения
height: 100vh; width: 100vw
на страницу и проверить пересечение с этим, но кажется, что наблюдатели пересечения не работают с двумя элементами, у которых нет родительских дочерних отношений? Может быть, я сделал код неправильно, но вот пример:
const thingIWantFillingView = document.getElementById("BigScrolly");
const viewPort = document.getElementById("ViewPort");  

// what I tried
const checkInView = new IntersectionObserver((event) => {
  console.log("This never seems to happen never happen");
}, {
  root: thingIWantFillingView,
  threshold: 0.5,
});
// when the viewport is at least half inside BigScrolly
checkInView.observe(viewPort);



// example of the thing I don't want
const checkTouchView = new IntersectionObserver((event) => {
  console.log("It has touched the viewport");
}, {
  root: null,
  threshold: 0,
});
// when BigScrolly has touched the viewport
checkTouchView.observe(thingIWantFillingView);
#ViewPort {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
  pointer


  Ignore this section, scroll down.

Как я могу определить, когда один из моих элементов полностью покрывает экран с помощью Intersection Observers?              

Ваш ответ

Отображаемое имя (по желанию):
Конфиденциальность: Ваш электронный адрес будет использоваться только для отправки уведомлений.
Анти-спам проверка:
Чтобы избежать проверки в будущем, пожалуйста войдите или зарегистрируйтесь.

1 Ответ

0 голосов
от
Придумали решение: у меня внутри BigScrolly есть липкий элемент высотой
100vh
(убедитесь, что он обернут в элемент с абсолютным позиционированием, чтобы отменить его место в потоке). Пока я полностью прокручиваю этот раздел, он будет занимать весь вид.
const coverChecker = document.querySelector(".CoverChecker");


// what I tried
const checkInView = new IntersectionObserver((event) =
Добро пожаловать на сайт ByNets, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...