How do I update the background value every time a user scrolls?

Issue

There is a container with 5 boxes which are in a display: flex. The container (boxes) can be scrolled through using 2 buttons that scrolls the container to the right or the left. The boxes container should have a constant white shadow that is in a linear gradient on the right and left sides.

The white shadow should only be shown on the right side when the user is on the far left and only the left side when the user is on the far right of the container. At any other time the shadow should be shown on both sides. This is meant to be constantly updated when the container is scrolled through.

However, the shadow is shown on the right side of the container and stays at the place it was even when scrolled through. The same happens with the left side, once the user initially scrolls to the right the shadow is set but stays in that position and does not move along with the container as it is scrolled thorough. This means that the shadow can end up in the middle of the container as it stays in that initial position.

How do I make the shadow constantly update this?

jsflidle: https://jsfiddle.net/Lm9n5ch8/

css (scss): (the background variable is updated to add the shadow)

$background : null;

.boxes {
    display: flex;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    // border: 2px solid red;
    position: relative;

    &::after{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        
        background: var(--background, $background);
        // background: linear-gradient(90deg,#fff 0%, transparent 10% 85%,#fff 100%);
    }


    &::-webkit-scrollbar {display: none}
}

js:

const boxesView = document.querySelector('.boxes')

document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 0% 85%,#fff 100%)')


boxesView.addEventListener('scroll', () => {
    console.log(boxesView.scrollLeft, 'scroll left')
    document.documentElement.style.setProperty('--background', 'null') // attempt to reset it before it changes so it isn't set

    if (boxesView.scrollLeft === 0) {
        document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 0% 85%,#fff 100%)')
        console.log('it is at 0')
    } else if (boxesView.scrollLeft >= 1206) {
        console.log('this is the max')
        document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 10% 100%,#fff 100%)')
    } else {
        console.log('middle')
        document.documentElement.style.setProperty('--background', 'linear-gradient(90deg,#fff 0%, transparent 10% 85%,#fff 100%)')
    }
})

Solution

you can use intersection observer to achieve this but make sure that element which you want to observe is not intersecting with any others not even developer tools. you can checkout this example :minimize console to see resultbecause console intersect the box which we are observing https://jsfiddle.net/e9L15bxn/4/
for more info about intersection observer: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

const firstBox = document.querySelector(".box:first-child");
const lastBox = document.querySelector(".box:last-child");
const firstAndLastBox = [firstBox,lastBox];

fade.classList.add("fade-right");

const observeFirst = new IntersectionObserver(entries=>{
    const firstBoxDetails = entries[0];
    if(firstBoxDetails.isIntersecting){
        fade.classList.remove("fade-both-side");
        fade.classList.add("fade-right");
    }else{
        fade.classList.add('fade-both-side');
        fade.classList.remove("fade-right");
    } 
},{threshold:1});

const observeLast = new IntersectionObserver(entries=>{
    const lastBoxDetails = entries[0];
    if(lastBoxDetails.isIntersecting){
        fade.classList.remove("fade-both-side");
        fade.classList.add("fade-left");
    }else{
        fade.classList.add('fade-both-side');
        fade.classList.remove("fade-left");
    } 
},{threshold:1});
observeLast.observe(lastBox);
observeFirst.observe(firstBox);

Answered By - Aman Kumar