Intersection Observer first and last elements

[codeispoetry]

There is a section, which has 11 article element tags. I want to observe the first and last article tag, and based on their visibility I want to hide the previous and next click.

Hide the Previous click: when the first element is visible.
Hide next click: when the last element is visible.

CSS flex-box arrangement is such that in the viewport at a time only 3 elements are visible.

i come up with some code:

const nextClick = document.querySelector(".next");
const previousClick = document.querySelector(".previous");
let observer = new IntersectionObserver(function(entries) {
	entries.forEach(entry => {
    console.log(entry);
    if (entries[0].isIntersecting) {
    	previousClick.classList.toggle("disableClick");
    }
    if (entries[entries.length-1].isIntersecting) {
    	nextClick.classList.toggle("disableClick");
    }
	});

})

var allArticleInSection = document.querySelectorAll("section.slider article");

allArticleInSection.forEach( section => {
	observer.observe(section);
});

My understanding is these lines are not written correctly as they are not part of a nodelist:

what can be the course to correct them?

[m3g4p0p]

Hi @codeispoetry, you can get a reference to the actual DOM element via the entry.target property, and then check for the index in the articles in the node list like so:

const articles = document.querySelectorAll('.slider article')
const nextClick = document.querySelector('.next')
const previousClick = document.querySelector('.previous')

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.target === articles[0]) {
      previousClick.classList.toggle('disableClick', !entry.isIntersecting)
    }

    if (entry.target === articles[articles.length - 1]) {
      nextClick.classList.toggle('disableClick', !entry.isIntersecting)
    }
  })
})

// ...

Or for only 3 articles visible at a time (if I understand your setup correctly):

const articles = Array.from(document.querySelectorAll('.slider article'))
const nextClick = document.querySelector('.next')
const previousClick = document.querySelector('.previous')

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const index = articles.indexOf(entry.target)

    if (index % 3 === 0) {
      previousClick.classList.toggle('disableClick', !entry.isIntersecting)
    }

    if (index % 3 === 2) {
      nextClick.classList.toggle('disableClick', !entry.isIntersecting)
    }
  })
})

// ...

[codeispoetry]

Hi @m3g4p0p

for (let i = 0 ; i < allSectionArticleNumber; i++) { 
	nodeHolidayClass[i].classList.remove("holidayclass");
}

allSectionArticleNumber = 3 in current situation. would it be possible to be certain that this should run only when nodeHolidayClass[i] actually exists? It is possible in certain situations that

nodeHolidayClass[0]
nodeHolidayClass[1] → This may not be existing in certain situation.
nodeHolidayClass[2] → This may not be existing in certain situation.

we have to check true or false.
I can use if statement, but is there any condensed way to shorten it?

[m3g4p0p]

@codeispoetry

would it be possible to be certain that this should run only when nodeHolidayClass[i] actually exists?

Yes you can check if the class list contains() that class, but this doesn’t seem necessary here… if it doesn’t, remove()ing that class simply does nothing.

[codeispoetry]

@m3g4p0p

this doesn’t seem necessary here… if it doesn’t, remove() ing that class simply does nothing.

Hi there @m3g4p0p
When there is nothing to do it generates warning or notice →

[m3g4p0p]

Ah okay, I thought you meant to check if the class exists on the element… if the element itself may not exist, there’s no way around checking for that beforehand.

Are you sure this will always work though? For instance, if the second section doesn’t have an associated “holiday” element but the third one does, then the mapping will get mixed up…

[codeispoetry]

How ould have you approached to avoid that error in console? The check should be done whether element exists or not?

[m3g4p0p]

@codeispoetry

The check should be done whether element exists or not?

Yes just like:

if (nodeHolidayClass[i]) {
  nodeHolidayClass[i].classList.remove("holidayclass")
}