Нагрузки на угловую страницу, прокрученные до средней секции вместо вершины (выпуск GSAP Scrolltrigger) ⇐ Javascript

[Anonymous]

Проблема < /h2>
Я строю угловое приложение с домашней страницей, на которой есть несколько разделов, включая раздел героев с видеофоном и горизонтальную прокрутку «Как это работает» с использованием GSAP Scrolltrigger. Однако, когда страница загружается, вместо того, чтобы начинать с верхней части, чтобы показать видео Hero, она автоматически прокручивается в разделе «Как это работает». to scroll down to see other sections

Actual Behavior

[*]Page loads already scrolled to the "how it works" section
[*]Hero section is not visible on initial load
[*]User has to scroll up to see the hero content
< /ul>
структура кода < /h2>
шаблон компонента (упрощенная) < /h3>











Panel 1
Panel 2
Panel 3



< /code>
typescript < /h3>
export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {

ngOnInit(): void {
console.log(' HomeComponent ngOnInit called');

// Attempt to ensure page starts at the top
if (window.scrollY !== 0) {
console.log(' Resetting scroll position to top');
window.scrollTo(0, 0);
}

gsap.registerPlugin(ScrollTrigger);
this.loadNearbyStations();
}

ngAfterViewInit(): void {
try {
this.initializeVideoPlayer();
this.setupHowItWorksAnimation(); // This might be causing the issue
this.initializeLottieChainOnVisible();
} catch (error) {
console.error(' Error in ngAfterViewInit:', error);
}
}

private setupHowItWorksAnimation(): void {
const howItWorksViewport = document.querySelector('.how-it-works-pinned-viewport') as HTMLElement;
const track = document.querySelector('.how-it-works-track') as HTMLElement;
const panels = gsap.utils.toArray(".how-it-works-panel") as HTMLElement[];

if (!howItWorksViewport || !track) {
return;
}

// Horizontal scroll animation
const tween = gsap.to(track, {
x: () => -(track.scrollWidth - document.documentElement.clientWidth) + "px",
ease: "none",
});

const scrollTrigger = ScrollTrigger.create({
trigger: howItWorksViewport,
animation: tween,
start: "top top",
end: () => "+=" + (track.scrollWidth - document.documentElement.clientWidth),
scrub: 0.2,
pin: true,
pinSpacing: true, // Adds space after pinning
invalidateOnRefresh: true,
snap: {
snapTo: 1 / (panels.length - 1),
duration: { min: 0.2, max: 0.3 },
ease: "power1.inOut"
},
markers: true // Debug markers enabled
});

// Force scroll reset after ScrollTrigger is created
setTimeout(() => {
window.scrollTo(0, 0);
ScrollTrigger.refresh();
}, 0);
}

ngOnDestroy(): void {
// Clean up ScrollTriggers
const triggers = ScrollTrigger.getAll();
triggers.forEach((trigger: any) => trigger.kill());
}
}
< /code>
css (соответствующие части) < /h3>
.section {
height: 100vh;
position: relative;
}

.hero-section {
position: relative;
}

.how-it-works-pinned-viewport {
width: 100vw;
overflow: hidden;
position: relative;
z-index: 20;
}

.how-it-works-track {
display: flex;
height: 100%;
position: relative;
z-index: 1;
will-change: transform;
}

.how-it-works-panel {
width: 100vw;
height: 100%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}

Что я попробовал

• Ручной сброс прокрутки в ngoninit : добавлено window.scrollto (0, 0) Но он, кажется, переопределен позже
• scroll
• scroll
• . position after component initialization
• Router scroll position: Checked Angular router configuration for scroll position restoration
• CSS debugging: Added console logs to track scroll position at different lifecycle stages

Debug Выход < /h2>
Консольные журналы показывают: < /p>
HomeComponent constructor called
Initial scroll position: { x: 0, y: 0, documentHeight: 4000, windowHeight: 969 }
HomeComponent ngOnInit called
Scroll position at ngOnInit: { x: 0, y: 0, documentHeight: 4000, windowHeight: 969 }
Resetting scroll position to top
HomeComponent ngAfterViewInit called
Scroll position at ngAfterViewInit: { x: 0, y: 0, documentHeight: 4000, windowHeight: 969 }
Setting up how-it-works animation
ScrollTrigger created: { start: 969, end: 1938, trigger: [object HTMLElement] }
Scroll position after ScrollTrigger setup: { x: 0, y: 969 } // ← Issue happens here!


Подробнее здесь: https://stackoverflow.com/questions/796 ... -scrolltri