मैं एक पूर्ण पृष्ठ चौड़ाई/ऊंचाई div के साथ एक वेबपृष्ठ बना रहा हूँ। स्क्रॉल करते समय मेरे पास दो प्रकार के तरीके हैं।कोणीय 4 - स्क्रॉल एनिमेशन
क्लिक करें
//HTML
<a (click)="goToDiv('about')"></a>
//JS
goToDiv(id) {
let element = document.querySelector("#"+id);
element.scrollIntoView(element);
}
स्क्रॉल पर स्क्रॉल HostListener
@HostListener("window:scroll", ['$event'])
onWindowScroll($event: any): void {
this.topOffSet = window.pageYOffset;
//window.scrollTo(0, this.topOffSet+662);
}
1. पर कैसे एक स्क्रॉल एनीमेशन प्रभाव जोड़ने के लिए?
बस की तरह है:
$('.scroll').on('click', function(e) {
$('html, body').animate({
scrollTop: $(window).height()
}, 1200);
});
2. और कैसे HostListener उपयोग करने के लिए अगले div करने के लिए स्क्रॉल करने के लिए?
मुझे लगता है कि यह समाधान यहां है [https://stackoverflow.com/questions/38748572/scroll-event-on-hostlistener ](httpsoverstow.com/questions/38748572/scroll-event-on-hostlistener) –
@ ओबायडुलहाक 'होस्टलिस्टर' ठीक से काम कर रहा है। एनीमेशन जोड़ने के लिए सुनिश्चित नहीं है। –
होस्ट श्रोता में कॉल किए गए कार्यों में सीएसएस एनीमेशन का उपयोग करें। यहां अच्छी मार्गदर्शिका: https://css-tricks.com/aos-css-driven-scroll-animation-library/ –