0

I am trying to build a portfolio site where an elevator moves up and when it gets to a floor the doors open and the detail renders. When scrolling further the doors close and when it reaches a certain point it snaps and smooth scrolls to the nearest floor.

I have got it working fine in Firefox but not chrome based browsers which is really confusing me. I also can get the chrome based browser to move to a hash anchor point or scrolltoview but only if firing them using a button they never work when the intersection observer calls the code???

I am using the intersection observer to detect which floor is visible and initiate the opening and closing event and a separate observer to detect when a floor is 50% on screen to snap to the nearest floor.

I first tried to avoid the second intersection observer using scroll-snap to align the floors but that didn't work on any browser??

.container-projects {
    z-index: -2;
    min-height: 80vh;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    scroll-snap-type: y proximity;
}

.project {
    z-index: -2;
    background-size: cover;
    width: 100%;
    height: 80vh;
    padding-top: 3rem;
    padding-bottom: 3rem;
    scroll-snap-align: start;
}

I next tried to use the scrollToView() function which works beautifully in firefox but not in chrome based??

const floorObserver = new IntersectionObserver(
    (entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.scrollIntoView({ behavior: 'smooth', block: 'end' });
            }
        });
    },
    { threshold: 0.5 }
);

I also tried to use the anchor links to get the intersection observer to locate the floors which again works fine in firefox but not in chrome??

const floorObserver = new IntersectionObserver(
    (entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                move(entry.target.id);
                
            }
        });
    },
    { threshold: 0.5 }
);

function move(entry) {
    window.location.href = '#' + entry;

}

I am getting the feeling it maybe because the mouse scrolling is taking precedence over the scrollTo and the anchor links but I really don't understand what's going on?

Any help is much appreciated but help without JQuery is even more appreciated.

Many Thanks

Geoff

Geoff Walker
  • 1
  • 3

1 Answers1

0

I have fixed my own problem whoop whoop!

In the end I could not get the hash change or scrollto functions to work in chrome based browsers so I returned to where I started and played again with scroll snap and worked out the problem was the parent of the scroll-snap parent container it was position: relative when changed to position: fixed everything worked well.

Geoff Walker
  • 1
  • 3